需求：在web界面上实现类型tab页签的效果
aspx界面代码：
<div class="tab1" id="tab1"> <div class="menu"> <ul> <li id="one1" onclick="setTab('one',1)">充值</li> <li id="one2" onclick="setTab('one',2)">作废售水</li> <li id="one3" onclick="setTab('one',3)">退水</li> <li id="one6" onclick="setTab('one',6)">换表</li> </ul> </div> <div class="menu" style="border-top: #cccccc solid 1px;"> <ul> <li id="one4" onclick="setTab('one',4)">补卡</li> <li id="one5" onclick="setTab('one',5);clearCardExt();">清除卡</li> <li id="one7" onclick="setTab('one',7);readCardExt();">读卡</li> </ul> </div> <div class="menudiv"> <div id="con_one_1"> <table> <tr> <td>充值金额：</td> <td> <input type="text" id="txtRechargeAmount" onblur="getMeterCount()" /> <%--<asp:TextBox ID="txtRechargeAmount" runat="server"></asp:TextBox>--%><span>元</span></td> </tr> <tr> <td>预存水量：</td> <td> <input type="text" id="txtPrestoreWater" /> <%-- <asp:TextBox ID="txtPrestoreWater" runat="server"></asp:TextBox>--%><span>吨</span></td> </tr> <tr> <td>收取金额：</td> <td><span>元</span></td> </tr> <tr> <td>找零：</td> <td><span>元</span></td> </tr> <tr> <td> <asp:Button ID="btnNetRecharge" runat="server" Text="网络充值" CssClass="btn" /></td> <td> <asp:Button ID="btnRecharge" runat="server" Text="射频卡充值" CssClass="btn" OnClientClick="writeCardExt();return false;" /></td> </tr> </table> </div> <div id="con_one_2" style="display: none;">作废售水</div> <div id="con_one_3" style="display: none;">退水</div> <div id="con_one_4" style="display: none;">补卡</div> <div id="con_one_5" style="display: none;">清除卡</div> <div id="con_one_6" style="display: none;">换表</div> <div id="con_one_7" style="display: none;">读卡</div> </div> </div>js代码： //控制操作tab的高亮显示 参数(one,索引号：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代码： /*----------------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:#3385ff;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;}/*--------------------按钮--------------------------*/.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}注意id的命名是有讲究的，每一个li对应着一个div，这样就可以根据点击不通的li显示不同的div，然后js控制li的css显示效果，让点击的li高亮显示。 
