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

稿源：互联网 2018-11-06 15:23:23 点击： 18025 撤稿纠错

把 onclick="nTabs(this,0) 变成 onmouserover="nTabs(this,0),可以做一个鼠标放上去就换内容的效果

以下讨论的是和JavaScript Tab 滑动兼容性相关的兼容性非常好的简单小巧JavaScript Tab滑动导航菜单特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.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>

关于兼容性非常好的简单小巧JavaScript Tab滑动导航菜单特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018110680868.shtml方便下次再访问哦。

·上一篇： 原生制作的js涂鸦画板特效可调画笔颜色|粗细|橡皮檫功能
·下一篇： js找出数字数组中最大的元素

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

文章分类LIST >>返回首页

最新游戏

最新新闻