最简单的tab选项卡

刺骨的言语ヽ痛彻心扉 2022-04-16 06:23 258阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3VvdGFpbA_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>tab分页</title>
        <script type="text/javascript">
            //导航栏单击变换内容 传入对应导航栏元素和其指定索引
            function switchTab(_this,num) {
                var tag = document.getElementById("nav7");    //获得导航容器nav标签对象
                var number = tag.getElementsByTagName("a");   //获取导航栏元素个数(getElementsByTagName是返回元素素组)
                var tabs = document.getElementById("tabs");
                var divNum = tabs.getElementsByClassName("eachDiv");   //获取导航元素对应的div个数
                for(var i=0;i<number.length;i++){    //number是一个数组，这里应该用number.length显示它的长度
                    number[i].className = " ";       //清除所有导航栏元素的特殊样式
                    divNum[i].style.display = "none"; //对应所有div都隐藏
                }
                _this.className = "navl_no1";  //给当前导航栏元素添加样式
                var content = document.getElementById("tabs_"+num);  //当前导航栏元素对应的div
                content.style.display = "block";  //显示当前导航栏元素对应的div部分
            }
        </script>
        <style type="text/css">
            .navl {
                height: 30px;
                padding-top: 8px;
            }
            .navl a{
                color: #3C3C3C;
                text-decoration: none;
                padding: 8px;
            }
            .navl a:hover,#navl a:active {
                color: green;
                text-decoration: underline;
            }
            .navl .navl_no1 {   /*“头条”*/
                color: green;
                text-decoration: none;
                border-top: solid 1px green;
            }
            .tabs {
                background-color: #ffffff;
                border: solid 1px #E0E0E0;
                height: 282px;
                width: 276px;
                overflow: scroll;   /*当元素内容太大而超出规定区域时，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。。*/
            }
        </style>
    </head>
    <body>
    <nav id="nav7" class="navl">
        <a href="#"  onclick="switchTab(this,1)" class="navl_no1">头条</a>
        <a href="#"  onclick="switchTab(this,2)">社会</a>
        <a href="#"  onclick="switchTab(this,3)">娱乐</a>
        <a href="#"  onclick="switchTab(this,4)">军事</a>
    </nav>
    <div id="tabs">
        <div id="tabs_1" class="eachDiv" style="display: block">   
            <img src="http://www.pp3.cn/uploads/allimg/111110/15563RI9-7.jpg" width="274px">
            <ul>
                <li><a href="#">县领导找不着住建局长 对其通报批评</a></li>
            </ul>
        </div>
        <div id="tabs_2" class="eachDiv" style="display: none">
            <img src="http://www.pp3.cn/uploads/allimg/111110/114J0L31-5.jpg" width="274px">
            <ul>
                <li><a href="#">骑马不喝酒的代码</a></li>
                <li><a href="#">泰国政府想甩锅 我们不能让它溜了</a></li>
            </ul>
        </div>
        <div id="tabs_3" class="eachDiv" style="display: none">
                第三个
        </div>
        <div id="tabs_4" class="eachDiv" style="display: none">
            <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c3320b14bb3184c510fd8f9a185.jpg" width="274px">
        </div>
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3VvdGFpbA_size_16_color_FFFFFF_t_70]: /images/20220416/66b10b21889a450a981ebce63463ab41.png