js melaksanakan kemahiran kod_javascript kesan menu (tab) pintu gelangsar mudah-tutorial js-php.cn

js melaksanakan kemahiran kod_javascript kesan menu (tab) pintu gelangsar mudah

WBOY

Lepaskan： 2016-05-16 15:40:54

asal

1242 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan menu pintu gelangsar mudah dalam js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Menu tab web yang ringkas dan praktikal yang melaksanakan dua tab pada halaman yang sama Yang pertama ialah pintu gelangsar, yang pada asasnya serupa dari segi reka letak, yang digunakan terutamanya di sini : tabMenu, fungsi fungsi: melaksanakan menu tab, perihalan parameter: tabMenu(tabBox,navClass);

Parameter 1: tabBox (id bekas tab)
Parameter dua: navClass (kelas gaya label semasa)
Nota: Bergantung pada struktur html yang ditentukan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-simple-scroll-menu-tab-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
ul,li{margin:0;padding:0;}
.tabBox{width:268px;margin:20px;}
ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}
ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;}
ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;}
.tabCon{border:1px solid #000;border-top:none;background:#fff;}
.tCon{display:none;background:#eee;padding:25px;}
</style>
<script type="text/javascript"> 
 function tabMenu(tabBox,navClass){
  var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li");
  var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div");
  var tabLens=tabCon.length;
  for(var i=0;i<tabLens;i++){
  //应用js闭包传入参数i作为当前索引值赋值给m
   (function(m){
   tabNavLi[m].onmouseover = function(){
    for(var j=0; j<tabLens; j++){
     tabNavLi[j].className = (j==m)&#63;navClass:"";
     tabCon[j].style.display = (j==m)&#63;"block":"";
    }
   }
   })(i);
  }
 }
//函数调用
window.onload=function(){
 tabMenu("tabBox1","active");
 tabMenu("tabBox2","active");
}
</script>
</head>
<body>
<!--demo1-->
<div id="tabBox1" class="tabBox">
 <ul class="tabTag">
  <li class="active">新闻1</li>
  <li>体育1</li>
  <li>财经1</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新闻1内容</div>
  <div class="tCon">体育1内容</div>
  <div class="tCon">财经1内容</div>
 </div>
</div>
<!--demo2-->
<div id="tabBox2" class="tabBox">
 <ul class="tabTag">
  <li class="active">新闻2</li>
  <li>体育2</li>
  <li>财经2</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新闻2内容</div>
  <div class="tCon">体育2内容</div>
  <div class="tCon">财经2内容</div>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.