Heim >Web-Frontend >HTML-Tutorial >tab功能菜单??利用tab切换不同的div_html/css_WEB-ITnose

tab功能菜单??利用tab切换不同的div_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:55:321243Durchsuche

需求:在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()">                                                    --%><span>元</span>
</td>                                            </tr>                                            <tr>                                                <td>预存水量:</td>                                                <td>                                                    <input type="text" id="txtPrestoreWater">                                                    --%><span>吨</span>
</td>                                            </tr>                                            <tr>                                                <td>收取金额:</td>                                                <td><span>元</span></td>                                            </tr>                                            <tr>                                                <td>找零:</td>                                                <td><span>元</span></td>                                            </tr>                                            <tr>                                                <td>                                                    <button id="btnNetRecharge" runat="server" text="网络充值" cssclass="btn"></button>
</td>                                                <td>                                                    <button id="btnRecharge" runat="server" text="射频卡充值" cssclass="btn" onclientclick="writeCardExt();return false;"></button>
</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 css代码:  <br>  <pre name="code" class="sycode">/*----------------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高亮显示。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn