cari

Rumah >hujung hadapan web >tutorial js >Contoh penggunaan tab Tab Mudah dilaksanakan dalam kemahiran js_javascript

Contoh penggunaan tab Tab Mudah dilaksanakan dalam kemahiran js_javascript

WBOY
WBOYasal
2016-05-16 15:40:241278semak imbas

Contoh dalam artikel ini menerangkan penggunaan Tab Mudah yang dilaksanakan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Tab halaman web ini ialah kod contoh tunjuk cara dalam pemalam tab Easy Tabs Ia adalah gaya tab paling ringkas dengan sedikit warna animasi.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-Easy-Tabs-cha-menu-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs选项卡</title>
<style type="text/css">
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}
</style>
<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>
<script type="text/javascript">
/*Function for our Tabmenu with 4 Tabs*/
function swichtabs(wert) {
 if (wert=='1'){
  document.getElementById('tablink1').className='tab1 tabactive';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4';
 }else if (wert=='2'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2 tabactive';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4';
 }else if (wert=='3'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3 tabactive';
  document.getElementById('tablink4').className='tab4';
 } else if (wert=='4'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4 tabactive';
 }
}
</script>
</head>
<body>
<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('1');" onclick="return false;" title="" class="tabactive" id="tablink1">Tab 1 </a>
</li>
<li><a href="#" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4');swichtabs('3');" onclick="return false;" title=""id="tablink3">Tab 3 </a>
</li>
<li><a href="#" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2');blendoff('tabcontent3');swichtabs('4');" onclick="return false;" title=""id="tablink4" >Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu -->
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
Tabcontent 1
</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
Tabcontent 2
</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
Tabcontent 3
</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
Tabcontent 4
</div>
<!--End Tabcontent 4-->
</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 kandungan universal fade-out Tab effect_jqueryArtikel seterusnya：jquery melaksanakan kandungan universal fade-out Tab effect_jquery

Artikel berkaitan

Lihat lagi