编写tab选项卡

最新推荐文章于 2024-09-25 18:15:20 发布

编小怪

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量380

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73945321/article/details/136719214

版权

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个具有动画效果的选项卡系统，用户可以通过鼠标悬停切换不同类别的内容列表。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tab选项卡</title>
    </head>
    <style>
        .tabbox{
            width: 400px;
            height: 150px;
            border: 1px solid #080708;
            margin: 50px auto;
        }
        .tabBtns{
            height: 40px;
            border-bottom: 1px solid #999799;
        }
        .tabBtns li{
            float: left;
            line-height: 30px;
            width: 72px;
            text-align: center;
            overflow: hidden;
        }
        .tabBtns li.on{
            background: white;
            color:blanchedalmond;
            font-weight: bolder;
        }
        .tabCon ul{
            height: 100px;
            margin-top: 10px;
            display: none;
        }
        .tabCon ul li{
            float: left;
            width: 150px;
            line-height: 20px;
            text-align: center;
        }
    </style>
    <body>
        <div class="tabbox">
            <ul class="tabBtns" id="tabBtns">
                <li class="tabBtns">动漫</li>
                <li>电视剧</li>
                <li>电影</li>
                <li>娱乐</li>
                <li>记录</li>
            </ul>
        <div class="tabCon">
            <ul class="mod" style="display:block;">

                <li>银魂</li>
                <li>智龙迷域</li>
                <li>黑色四叶草</li>
                <li>我的英雄学院</li>
            </ul>
            <ul class="mod">
                <li>巴啦啦小魔仙</li>
                <li>善意的谎言</li>
                <li>花千骨</li>
                <li>仙剑奇侠传三</li>
            </ul>
            <ul class="mod">
                <li>咒怨</li>
                <li>招魂</li>
                <li>飞驰人生2</li>
                <li>第二十条</li>
            </ul>
            <ul class="mod">
                <li>花儿与少年</li>
                <li>明星大侦探</li>
                <li>密室大逃脱</li>
                <li>中餐厅</li>
            </ul>
            <ul class="mod">
                <li>逃出无人岛</li>
                <li>人与自然</li>
                <li>自然现象</li>
                <li>走近科学</li>
            </ul>
        </div>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                var aBtns=document.getElementById("tabBtns").getElementsByTagName("li");
                var aMod=document.getElementsByClassName("mod");
                if(aBtns.length!=aMod.length){
                    alert("按钮个数必须与内容的个数保持一致！");
                    return;
                }
                for(var i=0;i<aBtns.length;i++){
                    aBtns[i].id=i;
                    aBtns[i].onmouseenter=function(){
                        for(var j=0;j<aBtns.length;j++){
                            if(aBtns[j].className=="on"){
                                aBtns[j].className="";
                                aMod[j].style.display="none";
                                break;
                            }
                        }
                        this.className="on";
                        aMod[this.id].style.display="block";
                    }
                }
            }
        </script>
    </body>
</html>