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

2020年02月20日 11:57:44 发表评论 阅读
<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>


  • 我的微信:hnbk168
  • 这是我的微信扫一扫
  • weinxin
  • 你领一次红包多一份动力
  • 支付宝搜索156-5053-9852领取
  • weinxin