DIV CSS 佈局教程網

在網站開發中尤其是新聞類網站，經常遇到多欄目切換的設計，這種效果有很多種實現效果，現在記錄一種很簡單的寫法：

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

以上所述是小編給大家介紹的JavaScript實現多欄目切換效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！