兼容性非常好的简洁TAB选项卡特效代码

稿源：互联网 2022-04-02 21:36:42 点击： 14181 撤稿纠错

JavaScript代码编写，兼容多浏览器的TAB特效代码， Tab滑动门的简单小巧制作。。。

以下讨论的是和TAB 选项卡兼容性相关的兼容性非常好的简洁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);">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://js.alixixi.com</div>
            <div id="myTab_Content1" class="none">
                网页设计素材DVD光盘热卖！网址：http://www.alixixi.cn</div>
            <div id="myTab_Content2" class="none">
                阿里西西</div>
            <div id="myTab_Content3" class="none">
                Alixixi.com</div>
        </div>
    </div>
</body>
</html>

关于兼容性非常好的简洁TAB选项卡特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2012032279439.shtml方便下次再访问哦。

·上一篇： 动态文本文字TAG标签随机变换排列显示的JS特效代码
·下一篇： 适合JQUERY新手学习的一个鼠标点击事件特效代码

兼容性非常好的简洁TAB选项卡特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻