Home > Web Front-end > HTML Tutorial > tab function menu??Use tab to switch different div_html/css_WEB-ITnose

tab function menu??Use tab to switch different div_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:55:32
Original
1259 people have browsed it

Requirement: Realize the effect of type tabs on the web interface

aspx interface code:

  <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>
Copy after login
js code:
//控制操作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;    }}
Copy after login
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:#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}
Copy after login
Note that the naming of ids is particular. Each li corresponds to a div, so that different divs can be displayed according to the li that cannot be clicked, and then js controls the css display effect of the li. to highlight the clicked li.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template