cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kesan tab Jadual paling mudah dilaksanakan oleh kemahiran JS_javascript

Kesan tab Jadual paling mudah dilaksanakan oleh kemahiran JS_javascript

WBOY
WBOYasal
2016-05-16 15:36:451268semak imbas

Contoh dalam artikel ini menerangkan kesan tab Jadual paling mudah yang dilaksanakan oleh JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah tab Jadual yang paling mudah, yang berdasarkan Jadual dan tidak mempunyai struktur DIV Rakan yang biasa dengan jadual mungkin menyukai tab ini Beberapa pengubahsuaian masih menggunakan Jadual, seperti sempadan jadual, warna latar belakang, dll. , I secara peribadi merasakan bahawa menggunakan Jadual lebih diselaraskan daripada menggunakan kod struktur DIV.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
<!--
.menu1 {
   font-size: 14px;
   color: #FFFFFF;
   text-decoration: none;
   background-color: skyblue;
   cursor:hand;
}
.menu2 {
   font-size: 14px;
   color: #990000;
   text-decoration: none;
   background-color: #FFFFFF;
   cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body onload="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
  <tr>
   <td height="20" class="menu1" id="tab1" onmouseover="tabit(tab1,ctab1)">今日焦点</td>
   <td height="20" class="menu2" id="tab2" onmouseover="tabit(tab2,ctab2)">一周热门</td>
  </tr>
  <tr id="ctab1" style="display:none">
   <td height="100" colspan="2" bgcolor="#FFFFFF">今日焦点的内容</td>
  </tr>
  <tr id="ctab2" style="display:none">
   <td height="100" colspan="2" bgcolor="#FFFFFF">一周热门的内容</td>
  </tr>
</table>
</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：CSS JavaScript melaksanakan kemahiran effect_javascript menu animasi fleksibel menegak seperti MootoolsArtikel seterusnya：CSS JavaScript melaksanakan kemahiran effect_javascript menu animasi fleksibel menegak seperti Mootools

Artikel berkaitan

Lihat lagi