Rumah >hujung hadapan web >tutorial js >js melaksanakan kemahiran kesan kod_javascript pintu gelangsar TAB yang mudah

js melaksanakan kemahiran kesan kod_javascript pintu gelangsar TAB yang mudah

WBOYasal: 2016-05-16 15:40:361278semak imbas

Contoh dalam artikel ini menerangkan kod kesan pintu gelangsar TAB yang mudah dilaksanakan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod pintu gelangsar, TAB ringkas, kesan navigasi tetikus ringkas, yang mungkin sering anda lihat Apabila tetikus diletakkan pada menu utama, kandungan dalam bingkai di bawah akan berubah dengan sewajarnya, dan tetikus tidak perlu untuk diklik. Anda hanya perlu meluncurkannya ke atas untuk menukar kandungan, seperti pintu, jadi kadangkala orang lain memanggilnya sebagai menu "pintu gelangsar".

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/

Kod khusus adalah seperti berikut:

<html>
<head>
 <title>简洁TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj + "_Content" + i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj + "_Content" + i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一块内容</div>
  <div id="myTab_Content1" class="none">
  第二块内容</div>
  <div id="myTab_Content2" class="none">
  第三块内容</div>
  <div id="myTab_Content3" class="none">
  第四块内容</div>
 </div>
 </div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery melaksanakan kod penukaran TAB untuk membuka halaman web dengan kesan animasi buat kali pertama_jqueryArtikel seterusnya：jquery melaksanakan kod penukaran TAB untuk membuka halaman web dengan kesan animasi buat kali pertama_jquery

Artikel berkaitan

Lihat lagi