需求:在web界面上实现类型tab页签的效果
aspx界面代码:
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" οnclick="setTab('one',1)">充值</li>
<li id="one2" οnclick="setTab('one',2)">作废售水</li>
<li id="one3" οnclick="setTab('one',3)">退水</li>
<li id="one6" οnclick="setTab('one',6)">换表</li>
</ul>
</div>
<div class="menu" style="border-top: #cccccc solid 1px;">
<ul>
<li id="one4" οnclick="setTab('one',4)">补卡</li>
<li id="one5" οnclick="setTab('one',5);clearCardExt();">清除卡</li>
<li id="one7" οnclick="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" οnblur="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高亮显示。