简单的一个jquery实现网页tab功能

来源：互联网发布：印度无人机知乎编辑：程序博客网时间：2024/06/05 10:53
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title></title>        <style type="text/css">        .tabs        {            list-style: none;            padding: 0;            margin: 0px;            border-bottom: 1px solid silver;            width: 619px;            border-top:0px solid silver;        }        .tabs li        {            float: left;            background: #e0e0e0;            border: 1px solid silver;            border-left: none;            margin: 0px;        }        ul.tabs li a        {            text-decoration: none;            padding: 0 20px;        }        a        {            display: block;            color:Black;        }        .active        {            background-color: White;            border-bottom: 1px solid #fff;        }        .tab_container        {            border-left: 1px solid gray;            border-right: 1px solid gray;            border-bottom: 1px solid gray;            border-top: 1px solid gray;            height: 500px;            float: left;            clear: both;            width: 841px;        }        a:hover        {            background-color: White;            color:Red;        }        a:visited        {            color: Black;        }    </style>    <script src="Js/jquery-1.4.1.js" type="text/javascript"></script>    <script src="Js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>        <script type="text/javascript">        $(document).ready(function() {            $(".tab_content").hide();            $("ul.tabs li").eq(0).addClass("active");            $(".tab_content").eq(0).show();            $(".tabs li").click(function() {                $(".tabs li").removeClass("active");                $(".tab_content").hide();                $(this).addClass("active");                var activeTab = $(this).find("a").attr("href");                $(activeTab).fadeIn("slow");            });        });    </script></head><body>    <form id="form1" runat="server">    <div>        <ul class="tabs">            <li><a href="#tab1">Menu1</a></li>            <li><a href="#tab2">Menu2</a></li>            <li><a href="#tab3">Menu3</a></li>            <li><a href="#tab4">Menu4</a></li>            <li><a href="#tab5">Menu5</a></li>            <li><a href="#tab6">Menu6</a></li>            <li><a href="#tab7">Menu7</a></li>        </ul>        <div class="tab_container">            <div id="tab1" class="tab_content">               <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab2" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab3" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab4" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab5" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab6" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>            <div id="tab7" class="tab_content">                <iframe src="" id="Iframe1" name="I1"> </iframe>                  </div>        </div>    </div>    </form></body></html>
黄爷爷的附加说明：实现后标签页面有缓慢显示特效，但是缺点是iframe要强制焦点显示，也就是会移动滚动条。