JavaScript实现多栏目切换效果

在网站开发中尤其是新闻类网站，经常遇到多栏目切换的设计，这种效果有很多种实现效果，现在记录一种很简单的写法：

 
 .news_wrap{
  width: 380px;
  height: 266px;
  float: left;
  margin-left: 15px;
 }
 .news_head{
  width: 380px;
  border-bottom: 2px solid #dedede;
  height: 51px;
  line-height: 51px;
 }
 .tabList ul li{
 float: left;
 cursor: pointer;
 font-weight: bold;
 text-align: center;
 font-size: 16px;
 width: 72px;
 }
 .cli1{
 color: #3a7aaf;
 border-bottom: 2px solid #3a7aaf;
 }
 .more{
 font-size: 14px;
 color: #9a9a9a;
 float: right;
 font-weight: normal;
 padding-right: 0;
 }
 .tabCon{
 width: 376px;
 padding-top: 13px;
 overflow: hidden;
 }
 
 
 
  
  

   
工作动态
   
媒体链接
   
领导活动
  
  
  
  工作动态_more
  媒体链接_more
  领导活动_more 
  
 
 
  
  
工作动态_list
  
工作动态_list
  
工作动态_list
  
  
  
媒体链接_list 
  
媒体链接_list 
  
媒体链接_list 
  
  
  
领导活动_list 
  
领导活动_list 
  
领导活动_list 
  
 
 

以上所述是小编给大家介绍的Javascript实现多栏目切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！