cari

Rumah >hujung hadapan web >tutorial js >Kod kesan tab TAB yang tidak teratur dilaksanakan oleh kemahiran JS_javascript

Kod kesan tab TAB yang tidak teratur dilaksanakan oleh kemahiran JS_javascript

WBOY
WBOYasal
2016-05-16 15:38:401318semak imbas

Contoh dalam artikel ini menerangkan kod kesan tab TAB yang tidak teratur yang dilaksanakan oleh JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kesan tab berbentuk berlian, yang mengubah gaya biasa tab Kesannya sangat bagus, khusus untuk semua orang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB选项卡效果</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.xixi1{width:346px;height:27px;line-height:27px;background-image:url(images/tab01.jpg);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/tab02.jpg);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/tab03.jpg);cursor:pointer;}
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
-->
</style>
</head>
<body style="text-align:center">
<script type=text/javascript>
 function setTab03Syn ( i )
 {
  selectTab03Syn(i);
 }
 function selectTab03Syn ( i )
 {
  switch(i){
   case 1:
   document.getElementById("TabTab03Con1").style.display="block";
   document.getElementById("TabTab03Con2").style.display="none";
   document.getElementById("TabTab03Con3").style.display="none";
   document.getElementById("font1").style.color="#000000";
   document.getElementById("font2").style.color="#ffffff";
   document.getElementById("font3").style.color="#ffffff";
   break;
   case 2:
   document.getElementById("TabTab03Con1").style.display="none";
   document.getElementById("TabTab03Con2").style.display="block";
   document.getElementById("TabTab03Con3").style.display="none";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#000000";
   document.getElementById("font3").style.color="#ffffff";
   break;
   case 3:
   document.getElementById("TabTab03Con1").style.display="none";
   document.getElementById("TabTab03Con2").style.display="none";
   document.getElementById("TabTab03Con3").style.display="block";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#ffffff";
   document.getElementById("font3").style.color="#000000";
   break;
  }
 }
</script>
<div class="tab">
 <div id="bg" class="xixi1">
  <div id="font1" class="tab1" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">查询广告企业</div>
  <div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">查询媒体刊例</div>
  <div id="font3" class="tab3" onMouseOver="setTab03Syn(3);document.getElementById('bg').className='xixi3'">查询供求商情</div>
 </div>
 <div id=TabTab03Con1>不规则TAB选项卡效果</div>
 <div id=TabTab03Con2 style="display:none">内容2</div>
 <div id=TabTab03Con3 style="display:none">内容3</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：Senarai komprehensif kaedah pengesahan Javascript_kemahiran javascriptArtikel seterusnya：Senarai komprehensif kaedah pengesahan Javascript_kemahiran javascript

Artikel berkaitan

Lihat lagi