Tab function menu -- use tab to switch between different Div

Requirement: implement the type tab on the web interface

Aspx interface code:

<Div class = "tab1" id = "tab1"> <Div class = "menu"> <ul> <li id = "one1" onclick = "settab ('one ', 1) "> recharge </LI> <li id =" one2 "onclick =" settab ('one', 2) "> Cancel water sales </LI> <li id =" one3 "onclick =" settab ('one', 3) "> decompress </LI> <li id =" one6 "onclick =" settab ('one', 6) "> change table </LI> </ul> </div> <Div class =" menu "style =" border-top: # cccccc solid 1px; "> <ul> <li id =" one4 "onclick =" settab ('one', 4) "> card supplement </LI> <li id =" one5 "onclick =" settab ('one', 5); clearcardext (); "> clear cards </LI> <li id =" one7 "onclick =" settab ('one', 7); readcardext (); "> card reading </LI> </ul> </div> <Div class =" menudiv "> <Div id =" con_one_1 "> <Table> <tr> <TD> recharge Amount: </TD> <input type = "text" id = "txtrechargeamount" onblur = "getmetercount ()"/> <% -- <asp: textbox id = "txtrechargeamount" runat = "server"> </ASP: textbox> -- %> <span> RMB </span> </TD> </tr> <TD> Reserved water volume: </TD> <input type = "text" id = "txtprestorewater"/> <% -- <asp: textbox id = "txtprestorewater" runat = "server"> </ASP: textbox> -- %> <span> ton </span> </TD> </tr> <TD> charged amount: </TD> <span> RMB </span> </TD> </tr> <TD> 0: </TD> <span> RMB </span> </TD> </tr> <TD> <asp: button id = "btnnetrecharge" runat = "server" text = "Network recharge" cssclass = "BTN"/> </TD> <asp: button id = "btnrecharge" runat = "server" text = "RF Card recharge" cssclass = "BTN" onclientclick = "writecardext (); Return false; "/> </TD> </tr> </table> </div> <Div id =" con_one_2 "style =" display: none; "> deprecated and sold water </div> <Div id =" con_one_3 "style =" display: none; "> decompress </div> <Div id =" con_one_4 "style =" display: none; "> card supplement </div> <Div id =" con_one_5 "style =" display: none; "> clear card </div> <Div id =" con_one_6 "style =" display: none; "> change table </div> <Div id =" con_one_7 "style =" display: none; "> card reading </div>

JS Code:

// Control the highlighted parameters of the Operation tab (one, index number: 1) function settab (name, cursel) {for (VAR I = 1; I <= links_len; I ++) {var menu = document. getelementbyid (name + I); var menudiv = document. getelementbyid ("con _" + name + "_" + I); if (I = cursel) {menu. classname = "off"; menudiv. style. display = "Block";} else {menu. classname = ""; menudiv. style. display = "NONE";} document. getelementbyid ("hidftaghistory "). value = cursel ;}}

CSS code:

/* ---------------- Tab --------------------- */* {margin: 0; padding: 0; List-style-type: none;} A, IMG {border: 0 ;} body {Font: 12px/180% Arial, Helvetica, sans-serif, "";}. tab1 {width: 281px; border-top: # aec7e5 solid 1px; border-bottom: # aec7e5 solid 1px; margin-top: 20px auto 0 auto ;}. menu {Height: 28px; border-left: # cccccc solid 1px; width: 280px ;}. menu Li {float: Left; width: 69px; text-align: center; line-Height: 28px; Height: 28px; cursor: pointer; border-Right: # cccccc solid 1px; color: #666; font-size: 14px; overflow: hidden; Background: # e0e2eb ;}. menu Li. off {Background: # 3366ff; color: White; font-weight: bold ;}. menudiv {Height: 200px; border-left: # cccccc solid 1px; border-Right: # cccccc solid 1px; border-top: 0; Background: # fefefe }. menudiv Div {padding: 15px; line-Height: 28px;}/* -------------------- button --------------------------*/. menudiv input [type = "text"] {width: 120px; Height: 16px; padding: 4px 2px; float: Left; Font: bold 12px 'lucida sans ', 'trebuchet Ms', 'tahoma '; Border: 1px solid # CCC; box-Shadow: 0 1px 1px # DDD inset, 0 1px 0 # FFF; border-radius: 3px ;}. menudiv span {color: Blue; margin: 2px; Height: 20px; line-Height: 20px ;}. lnkbtn {width: 1024px; margin-left: auto; margin-Right: auto; Height: 26px; line-Height: 26px; clear: Left; Background-color: White ;}. lnkbtn A {margin-left: 20px; font-size: 14px ;}. lnkbtn A: hover {color: red ;}. lnkbtn A: visited {color: # 9900ff}

Note that the name of the ID is exquisite. Each Li corresponds to a DIV, so that different divs can be displayed based on the Li that cannot be clicked, and JS controls the CSS Display Effect of Li, highlight the clicked Li.

Tab function menu -- use tab to switch between different Div