javascript实现多栏目切换

来源：互联网发布：合并后数组的中位数编辑：程序博客网时间：2024/05/16 12:59

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

这里写图片描述

 <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>

0 0