最简单的tab选项卡

最新推荐文章于 2023-10-03 15:35:56 发布

神奇小白

最新推荐文章于 2023-10-03 15:35:56 发布

阅读量676

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/uotail/article/details/84203114

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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">   <!--默认为该div显示-->
        <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>