您的位置：首页 > Web前端 > JavaScript

一个简单的网页选项卡效果菜单

2008-04-22 14:02 459 查看

<html >


<head runat="server">


    <title>选项卡效果菜单</title>




    <style type="text/css">...




    #TabMenu{...}{


    float:left;


    margin: 0px;


    padding: 0px;


    height:28px;


    width:600px;


    font-size:12px;


    line-height:28px;


    background-image: url(image/show_title.gif);


    background-repeat: repeat-x;


    background-position: left 0;


    border-top: #cccccc 1px solid;


    }




#TabMenu ul{...}{


     list-style-type:none; 


     margin:0; 


     padding:0;


 }




#TabMenu li{...}{


    float:left; 


    width:100px; 


    height:28px; 


    text-align:center; 


    border-right:1px #BEC0D5 solid;


}




.show_tab{...}{


    color:#000000; 


    font-weight:normal; 


    background:#fff; 


    width:90px; 


    height:28px;


}


a




{...}{


    color:black;


    text-decoration:none;


}


    </style>


    




    <script type="text/javascript" language="javascript">...


    function showTab(mid)




    ...{


        var i=1;


        for(i=1;i<=document.getElementsByTagName("li").length;i++)




        ...{


            eval("document.getElementById('m"+i+"').className='';");


            eval("document.getElementById('DIV"+i+"').style.display='none';");


        }


        


       eval("document.getElementById('m"+mid+"').className='show_tab';");


       eval("document.getElementById('DIV"+mid+"').style.display='block';");


    }


    </script>


</head>


<body>


    <form id="form1" runat="server">


         


    <div id="TabMenu">


    <ul>


      <li id="m1" class="show_tab"><a href="" onmouseover="javascript:showTab(1);" >选项卡菜单1</a></li>


      <li id="m2"><a href="" onmouseover="javascript:showTab(2);"> 选项卡菜单2</a></li>


      <li id="m3"><a href="" onmouseover="javascript:showTab(3);">选项卡菜单3</a></li>


      <li id="m4"><a href="" onmouseover="javascript:showTab(4);">选项卡菜单4</a></li>


      <li id="m5"><a href="" onmouseover="javascript:showTab(5);">选项卡菜单5</a></li>


    </ul>


    </div>


    <div style="clear:both;"></div>


    <div id="Div1" style="display:block;">选项卡菜单1的内容</div>


    <div id="Div2" style="display:none;">选项卡菜单2的内容</div>


    <div id="Div3" style="display:none;">选项卡菜单3的内容</div>


    <div id="Div4" style="display:none;">选项卡菜单4的内容</div>


    <div id="Div5" style="display:none;">选项卡菜单5的内容</div>


              


           


    </form>


</body>


</html>



 背景图片（show_title.gif）



效果图



缺点：只支持IE，在FF下测试不通过。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript div float class 测试 url
相关文章推荐
新的分享
章节导航