【JS】javascript实现多栏目切换

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

 <style>
 .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;
  }
 </style>
 
  <div class="news_wrap">
    <div class="news_head">
      <div class="tabList">
        <ul>
          <li class="cli1" id="p1" onmouseover="return swap_tab(1)" >工作动态</li>
          <li class="cli2" id="p2" onmouseover="return swap_tab(2)" >媒体链接</li>
          <li class="cli2" id="p3" onmouseover="return swap_tab(3)" >领导活动</li>
        </ul>
      </div>
      <div class="more">
        <div id="j1">工作动态_more</div>
        <div id="j2" style="display:none;">媒体链接_more</div>
        <div id="j3" style="display:none;">领导活动_more </div>
      </div>
    </div>
    <div class="tabCon">
      <div id="n1">
        <li>工作动态_list</li>
        <li>工作动态_list</li>
        <li>工作动态_list</li>
      </div>
      <div id="n2" style="display:none;">
        <li>媒体链接_list </li>
        <li>媒体链接_list </li>
        <li>媒体链接_list </li>
     </div>
      <div id="n3" style="display:none;">
        <li>领导活动_list </li>
        <li>领导活动_list </li>
        <li>领导活动_list </li>
      </div>
    </div>
  </div>

<script>
  function swap_tab(n){  //鼠标触发事件
	for(var i=1;i<4;i++){
		var curC=document.getElementById("n"+i);
		var curB=document.getElementById("p"+i);
        var mores = document.getElementById("j"+i);            
		if(n==i){
			curC.style.display="block";
			curB.className="cli1";
			mores.style.display = "block";
		}
		else{
			curC.style.display="none";
			curB.className="cli2";
            mores.style.display = "none";          
	    }
		
	}
}
</script>