• UL LI 布局 TAB 切换条


    web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab。

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tab</title>
        <style type="text/css">
            .tab { height:23px;}
            .tab ul { list-style:none; }
            .tab li { border:1px solid #ccc; background:#eee; cursor:pointer; display:block; float:left; text-align:center; text-decoration:none; width:68px; font-size:12px; height:21px; line-height:21px; margin:0 2px; position:relative; top:1px; z-index:9; }
            .tab li:hover { text-decoration:underline; }
            .tab li.curr { background:#fff; border-bottom-color:#fff; cursor:default; font-weight:bold; }
            .cc { border:1px solid #ccc; padding:10px; width:300px;}
        </style>
        <script type="text/javascript">
            // tab 
            function setTab(name,cursel,n){
                for(i=1;i<=n;i++){
                    var menu=document.getElementById(name+i);
                    var con=document.getElementById("con_"+name+"_"+i);
                    menu.className=i==cursel?"curr":"";
                    con.style.display=i==cursel?"block":"none";
                }
            }
        </script>
    </head>
    <body>
        <div class="tab">
            <ul>
               <li id="a1" onclick="setTab('a',1,3)" class="curr">tab_01</li>
               <li id="a2" onclick="setTab('a',2,3)">tab_02</li>
               <li id="a3" onclick="setTab('a',3,3)">tab_03</li>
            </ul>
        </div>
        <div id="con_a_1" class="cc">11<br />111<br />111<br />111</div>
        <div id="con_a_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
        <div id="con_a_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
        <br />
        <br />
    
        <div class="tab">
            <ul>
               <li id="b1" onmousemove="setTab('b',1,3)" class="curr">tab_01</li>
               <li id="b2" onmousemove="setTab('b',2,3)">tab_02</li>
               <li id="b3" onmousemove="setTab('b',3,3)">tab_03</li>
            </ul>
        </div>
        <div id="con_b_1" class="cc">111<br />111<br />111<br />11</div>
        <div id="con_b_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
        <div id="con_b_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
    </body>
    </html>
  • 相关阅读:
    Array的个人总结
    sublime3 的安装
    小白 安装和配置Tomcat 局域网内访问网页
    安装Axure7.0,完整教程,有验证码和汉化包
    安装 sublime2 (包括插件)
    ffmpeg
    ExecutorService
    artDialog
    交互
    刚查了,Z3795不支持EPT,即WP8开发必须的SLAT,看来只能作为简单的WINDOWS备机了
  • 原文地址:https://www.cnblogs.com/matthew-2013/p/3483219.html
Copyright © 2020-2023  润新知