兼容性最好的TAB选项卡_网络编程_奇迪科技(深圳)有限公司(www.qvdv.net)

欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

网络编程

兼容性最好的TAB选项卡

作者:admin 来源: 更新时间:2014-07-22

网站制作,网页编程,常用的兼容性最好的TAB选项卡特效,可以兼容各大浏览器,现在把代码写出来,只需要把以下代码复制到新建的html文本中,即可查看效果,全部代码如下:

<html>
<head>
    <title>兼容性非常好的简洁TAB特效代码</title>
    <script type="text/javascript">
        function nTabs(thisObj, Num) {
            if (thisObj.className == "active") return;
            var tabList = document.getElementById("myTab").getElementsByTagName("li");
            for (i = 0; i < tabList.length; i++) {//点击之后,其他tab变成灰色,内容隐藏,只有点击的tab和内容有属性
                if (i == Num) {
                    thisObj.className = "active";
                    document.getElementById("myTab_Content" + i).style.display = "block";
                } else {
                    tabList[i].className = "normal";
                    document.getElementById("myTab_Content" + i).style.display = "none";
                }
            }
        }
    </script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
        }
        .nTab
        {
            width: 500px;
            height: 200px;
            margin: 20px auto;
            border: 1px solid #333;
            overflow: hidden;
        }
        .none
        {
            display: none;
        }
        .nTab .TabTitle li
        {
            float: left;
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            font-weight: bold;
            text-align: center;
            width: 124px;
        }
        .nTab .TabTitle li a
        {
            text-decoration: none;
        }
        .nTab .TabTitle .active
        {
            background: black;
            color: #336699;
        }
        .nTab .TabTitle .normal
        {
            color: #F1AC1C;
        }
        .nTab .TabContent
        {
            clear: both;
            overflow: hidden;
            background: #fff;
            padding: 5px;
            display: block;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="nTab">
        <div class="TabTitle">
            <ul id="myTab">
                <li class="active" onclick="nTabs(this,0);">TAB1</li>
                <li class="normal" onclick="nTabs(this,1);">TAB2</li>
                <li class="normal" onclick="nTabs(this,2);">TAB3</li>
                <li class="normal" onclick="nTabs(this,3);">TAB4</li>
            </ul>
        </div>
        <div class="TabContent">
            <div id="myTab_Content0">
                网站制作,网站建设,网址:http://www.qvdv.net</div>
            <div id="myTab_Content1" class="none">
                欢迎您来带qvdv.net:http://www.qvdv.net</div>
            <div id="myTab_Content2" class="none">
                齐迪网络科技 </div>
            <div id="myTab_Content3" class="none">
                qvdv.net</div>
        </div>
    </div>
</body>
</html>


本文版权所有,转载须注明:来源  https://www.qvdv.net/qvdv-oop-480.html