• 三种简洁的Tab导航(网页选项卡)

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 前言

    在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。

    • 第一种形式:

    通过更换显示样式实现，这种很常见，就不多说了。

    <div id="tabs0">
    <ul class="menu0" id="menu0">
    <li onclick="setTab(0,0)" class="hover">新闻</li>
    <li onclick="setTab(0,1)">评论</li>
    <li onclick="setTab(0,2)">技术</li>
    <li onclick="setTab(0,3)">点评</li>
    </ul>
    <div class="main" id="main0">
    <ul class="block"><li>新闻列表</li></ul>
    <ul><li>评论列表</li></ul>
    <ul><li>技术列表</li></ul>
    <ul><li>点评列表</li></ul>
    </div>
    </div>

    • 第二种形式:

    这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。

    <div id="tabs1">
    <div class="menu1box">
    <ul id="menu1">
    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
    </ul>
    </div>
    <div class="main1box">
    <div class="main" id="main1">
    <ul class="block"><li>新闻列表</li></ul>
    <ul><li>评论列表</li></ul>
    <ul><li>技术列表</li></ul>
    <ul><li>点评列表</li></ul>
    </div>
    </div>
    </div>

    第一、二种形式的JS代码:

    function setTab(m,n){
    var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/
    var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/
    for(i=0;i<tli.length;i++){
    tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
    mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/
    }
    }

    • 第三种形式:

    这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。

    <div id="tabs2">
    <div class="menu2box">
    <div id="tip2"></div>
    <ul id="menu2">
    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
    </ul>
    </div>
    <div class="main" id="main2">
    新闻内容
    </div>
    </div>

    • 全部代码：

    <!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=gb2312" />
    <title>简洁Tab</title>
    <style type="text/css">
    <!--
    body,div,ul,li{
    margin:0 auto;
    padding:0;
    }
    body{
    font:12px "宋体";
    text-align:center;
    }
    a:link{
    color:#00F;
    text-decoration:none;
    }
    a:visited {
    color: #00F;
    text-decoration:none;
    }
    a:hover {
    color: #c00;
    text-decoration:underline;
    }
    ul{
    list-style:none;
    }
    .main{
    clear:both;
    padding:8px;
    text-align:center;
    }
    /*第一种形式*/
    #tabs0 {
    height: 200px;
    width: 400px;
    border: 1px solid #cbcbcb;
    background-color: #f2f6fb;
    }
    .menu0{
    width: 400px;
    }
    .menu0 li{
    display:block;
    float: left;
    padding: 4px 0;
    width:100px;
    text-align: center;
    cursor:pointer;
    background: #FFFFff;
    }
    .menu0 li.hover{
    background: #f2f6fb;
    }
    #main0 ul{
    display: none;
    }
    #main0 ul.block{
    display: block;
    }
    /*第二种形式*/
    #tabs1{
    text-align:left;
    width:400px;
    }
    .menu1box{
    position:relative;
    overflow:hidden;
    height:22px;
    width:400px;
    text-align:left;
    }
    #menu1{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    }
    #menu1 li{
    float:left;
    display:block;
    cursor:pointer;
    width:72px;
    text-align:center;
    line-height:21px;
    height:21px;
    }
    #menu1 li.hover{
    background:#fff;
    border-left:1px solid #333;
    border-top:1px solid #333;
    border-right:1px solid #333;
    }
    .main1box{
    clear:both;
    margin-top:-1px;
    border:1px solid #333;
    height:181px;
    width:400px;
    }
    #main1 ul{
    display: none;
    }
    #main1 ul.block{
    display: block;
    }
    /*第三种形式*/
    .menu2box{
    position:relative;
    overflow:hidden;
    height:22px;
    width:400px;
    text-align:left;
    background: #FFFFff;
    }
    #tabs2 {
    height: 200px;
    width: 400px;
    border: 1px solid #cbcbcb;
    background-color: #f2f6fb;
    }
    #tip2{
    position:absolute;
    top:0;
    left:0;
    height:22px;
    line-height:22px;
    z-index:0;
    width:100px;
    background: #f2f6fb;
    }
    #menu2{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    }
    #menu2 li{
    display:block;
    float: left;
    padding: 4px 0;
    width:100px;
    text-align: center;
    cursor:pointer;
    }
    -->
    </style>
    <script>
    <!--
    /*第一种形式 第二种形式 更换显示样式*/
    function setTab(m,n){
    var tli=document.getElementById("menu"+m).getElementsByTagName("li");
    var mli=document.getElementById("main"+m).getElementsByTagName("ul");
    for(i=0;i<tli.length;i++){
    tli[i].className=i==n?"hover":"";
    mli[i].style.display=i==n?"block":"none";
    }
    }
    /*第三种形式 利用一个背景层定位*/
    var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
    function nowtab(m,n){
    if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
    document.getElementById("tip"+m).style.left=n*100+'px';
    document.getElementById("main2").innerHTML=m3[n];
    }
    //-->
    </script>
    </head>
    <body>
    <br />
    <br />
    <!--第一种形式-->
    <div id="tabs0">
    <ul class="menu0" id="menu0">
    <li onclick="setTab(0,0)" class="hover">新闻</li>
    <li onclick="setTab(0,1)">评论</li>
    <li onclick="setTab(0,2)">技术</li>
    <li onclick="setTab(0,3)">点评</li>
    </ul>
    <div class="main" id="main0">
    <ul class="block"><li>新闻列表</li></ul>
    <ul><li>评论列表</li></ul>
    <ul><li>技术列表</li></ul>
    <ul><li>点评列表</li></ul>
    </div>
    </div>
    <br />
    <br />
    <!--第二种形式-->
    <div id="tabs1">
    <div class="menu1box">
    <ul id="menu1">
    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
    </ul>
    </div>
    <div class="main1box">
    <div class="main" id="main1">
    <ul class="block"><li>新闻列表</li></ul>
    <ul><li>评论列表</li></ul>
    <ul><li>技术列表</li></ul>
    <ul><li>点评列表</li></ul>
    </div>
    </div>
    </div>
    <br />
    <br />
    <!--第三种形式-->
    <div id="tabs2">
    <div class="menu2box">
    <div id="tip2"></div>
    <ul id="menu2">
    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
    </ul>
    </div>
    <div class="main" id="main2">
    新闻内容
    </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    </body>
    </html>

    • 标签：
    • div
    • settab
    • 形式
    • ul
    • lili
    • 学习元
    • id
    • href
    • li
    • class
    • onmouseover
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部