11-tab选项卡

最新推荐文章于 2022-07-11 20:19:37 发布

沈川希

最新推荐文章于 2022-07-11 20:19:37 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM基础文章标签： js javascript dom

本文链接：https://blog.youkuaiyun.com/weixin_45344023/article/details/107880850

DOM基础专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现选项卡效果的方法。通过简单的DOM操作，当鼠标悬停在不同选项卡上时，可以切换显示相应的内容区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tab选项卡

简述：鼠标放在导航栏上面，选中的部分会发生改变，下面的内容也会发生改变。

dom简单实现选项卡

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="tabs">
        <div id="options">
            <span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
        </div>
        <div id="contents">
            <ul style="display: block">
                <li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
                <li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
            </ul>
            <ul>
                <li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
                <li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
                <li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
                <li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
            </ul>
            <ul>
                <li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
                <li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

css部分


    <style>none
        ul li{list-style: none;}
        body{ background-color: #eee; font-size: 12px;}
        #tabs{ width: 300px; margin: 100px auto; background: #fff; }
        #tabs #options{ height: 30px; line-height: 30px }
        #tabs #options span { width: 60px; text-align: center; display: inline-block; }
        #tabs #options span.on { border-bottom: 2px solid orange; font-weight: bold; }
        #tabs #contents{ padding: 10px 0; }
        #tabs #contents li{ line-height: 20px; padding-left: 15px; }
        #tabs #contents ul{ display: none }
    </style>

js部分

<script>
        let spans = document.getElementsByTagName("span");
        let uls = document.getElementsByTagName("ul");
        for(let i  = 0;i < spans.length;i++)
        {
            spans[i].onmouseover = function (){
                for(let j = 0 ;j < spans.length;j++)
                {
                    spans[j].className = "";
                }
                
                this.style.cursor = "pointer";
                this.className = "on";

                for(let j = 0;j < spans.length;j++)
                {
                    uls[j].style.display = "none";
                }
                uls[i].style.display = "block";
            }
        }

    </script>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>none
        ul li{list-style: none;}
        body{ background-color: #eee; font-size: 12px;}
        #tabs{ width: 300px; margin: 100px auto; background: #fff; }
        #tabs #options{ height: 30px; line-height: 30px }
        #tabs #options span { width: 60px; text-align: center; display: inline-block; }
        #tabs #options span.on { border-bottom: 2px solid orange; font-weight: bold; }
        #tabs #contents{ padding: 10px 0; }
        #tabs #contents li{ line-height: 20px; padding-left: 15px; }
        #tabs #contents ul{ display: none }
    </style>
</head>
<body>

    <div id="tabs">
        <div id="options">
            <span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
        </div>
        <div id="contents">
            <ul style="display: block">
                <li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
                <li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
            </ul>
            <ul>
                <li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
                <li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
                <li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
                <li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
            </ul>
            <ul>
                <li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
                <li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
            </ul>
        </div>
    </div>

    <script>
        let spans = document.getElementsByTagName("span");
        let uls = document.getElementsByTagName("ul");
        for(let i  = 0;i < spans.length;i++)
        {
            spans[i].onmouseover = function (){
                for(let j = 0 ;j < spans.length;j++)
                {
                    spans[j].className = "";
                }
                this.style.cursor = "pointer";
                this.className = "on";

                for(let j = 0;j < spans.length;j++)
                {
                    uls[j].style.display = "none";
                }
                uls[i].style.display = "block";
            }
        }

    </script>
    <!-- <script>
        let spans = document.getElementsByTagName("span");
        for(let i = 0;i < spans.length;i++)
        {
            spans[i].onmouseover
        }
    </script> -->


</body>
</html>

运行效果
在这里插入图片描述

面向对象选项卡

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="tabContainer" id="tab1">
        <ul>
            <li class="select">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
        </ul>
        <div class="tabBody">
            <div style="display: block">
                选项1的内容
            </div>
            <div>
                选项2的内容
            </div>
            <div>
                选项3的内容
            </div>
            <div>
                选项4的内容
            </div>
        </div>
    </div>

    <div class="tabContainer" id="tab2">
        <ul>
            <li class="select">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
        </ul>
        <div class="tabBody">
            <div style="display: block">
                选项1的内容
            </div>
            <div>
                选项2的内容
            </div>
            <div>
                选项3的内容
            </div>
            <div>
                选项4的内容
            </div>
        </div>
    </div>
</body>
</html>

css部分

<style>
        .tabContainer {
            width: 500px;
            margin: 50px auto;
            border: 1px solid #ccc;
        }

        .tabContainer ul, li {
            list-style: none;
            margin: 0px;
            padding: 0px;

        }

        .tabContainer ul {
            overflow: hidden;
            background: #eee;
        }

        .tabContainer ul li {
            float: left;
            margin: 5px;
            padding: 5px;
        }

        .select {
            background-color: #fff;
        }
        .tabContainer .tabBody div{
            display: none;
        }

    </style>

js部分

 <script>
        //tab是一个构造器
        function Tab(tabId)
        {
            //获取属性，这里的this指的是新建立的对象
            this.tab = document.getElementById(tabId);
            this.lis = this.tab.getElementsByTagName("li");
            this.divBody = this.tab.getElementsByTagName("div")[0];
            this.divs = this.divBody.getElementsByTagName("div");
            this.init();		//调取init函数
        }

        //在原型对象上给li添加点击事件
        Tab.prototype.init = function(){
            let that = this;
            for(var i = 0;i < this.lis.length;i++)
            {
                this.lis[i].index = i;
                this.lis[i].onclick = function (){
                    that.showTab(this.index);	//这里的this指的是事件源，that记录的是新创建的对象
                }
            }
        }

        //将通用的方法上放到原型上
        Tab.prototype.showTab = function(index){
            console.log('showTab方法调用了:',index);
            for(let i = 0;i < this.lis.length;i++)
            {
                this.lis[i].className="";		//没有选中的将className移除，并将下面的内容隐藏
                this.divs[i].style.display = "none";
            }
            this.lis[index].className = "select";		//将选中的选项卡赋予新的类，并显示对应下面的文字
            this.divs[index].style.display = "block";
        }

        new Tab("tab1");
        new Tab("tab2");
    </script>

运行效果
在这里插入图片描述