兼容性非常好的简单小巧JavaScript Tab滑动导航菜单特

吃瓜阿阳 2022-09-20 17:22:36

友情提示点击顶部放大镜可以使用站内搜索记住我们的地址 www.hainabaike.com

<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);">ASP</li>
                <li class="normal" onclick="nTabs(this,1);">PHP2</li>
                <li class="normal" onclick="nTabs(this,2);">PHP3</li>
                <li class="normal" onclick="nTabs(this,3);">PHP4</li>
            </ul>
        </div>
        <div class="TabContent">
            <div id="myTab_Content0">
                海纳百客特效演示：同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选v同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选</div>
            <div id="myTab_Content1" class="none">
                 海纳百客特效演示：兼容性好2</div>
            <div id="myTab_Content2" class="none">
                 海纳百客特效演示：兼容性好3</div>
            <div id="myTab_Content3" class="none">
                 海纳百客特效演示：兼容性好4</div>
        </div>
    </div>
</body>
</html>