Standard web tab switch and standard web tab Switch
Advantages:
Comply with the popular web standards. Structure, style, and behavior are truly separated.
/* Structure-html */
<div id="box"> <ul id="tab"> <li class="on">Home</li> <li>Product</li> <li>About</li> </ul> <ul id="tab_con"> <li>Home Content</li> <li class="off">Product Content</li> <li class="off">About Content</li> </ul></div>
/* Style-css */
<style type="text/css"> #box{padding: 20px;font-size:12px} #box ul{margin:0;padding:0;list-style:none} #tab{height:25px; padding-left: 10px;border-bottom:1px solid #aacbee; } #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer} #tab li:hover{color:#ca4e00; font-weight:bold;} #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px; color:#CA4E00; font-weight:bold;} #tab_con{border-top:none;padding:10px 20px 20px 20px;} #tab_con .off{display:none;} </style>
/* Behavior-js */
<script type="text/javascript"> $(function(){ $("#tab li").click(function(){ var idx=$("#tab li").index(this); $(this).addClass("on").siblings().attr("class",""); $("#tab_con").children(":eq("+idx+")").show().siblings().hide(); }) }) </script>
Js tab Label Switching
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
<! --
. STYLE3 {font-size: 14px; color: # FF3333 ;}
-->
</Style>
</Head>
<Body>
<Table width = "352" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "88" height = "24" background = "TX3/bg_1.jpg" id = "td0" onmouseover = "showPage (0); checkbr (0 ); "class =" STYLE3 "style =" cursor: hand "> <a style =" cursor: hand "> <div align =" center "class =" STYLE3 "> campus news </div> </a> </td>
<Td width = "88" background = "TX3/bg_2.jpg"> <div align = "center" id = "td1" onmouseover = "showPage (1); checkbr (1 ); "class =" STYLE3 "style =" cursor: hand "> notification announcement </div> </td>
<Td width = "88" background = "TX3/bg_2.jpg"> <div align = "center" id = "td2" onmouseover = "showPage (2); checkbr (2 ); "class =" STYLE3 "style =" cursor: hand "> teaching news </div> </td>
<Td widt ...... remaining full text>
How does css div js implement switching between multiple TAB labels?
I have the same switch code as you. It's not a TAB. You can send it to me in your email.