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>

 

 

posted @ 2013-12-20 09:15  matthew2015  阅读(1583)  评论(0)  编辑  收藏  举报