js的选项卡经典案例：排他思想

子云端科技

已于 2022-11-16 21:29:04 修改

阅读量212

点赞数 2

文章标签： javascript 前端 html

于 2022-11-10 21:25:35 首次发布

本文链接：https://blog.csdn.net/m0_68863090/article/details/127796734

版权

运用的是排他思想。排他思想，就是排除所有人（留下我自己），然后设置自己。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他思想</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #wrap {
            position: relative;
            top: 10px;
            left: 10px;
        }

        #wrap button {
            padding: 3px 5px;
            margin: 5px 10px;
        }

        #wrap button.active {
            background-color: lightpink;
            color: deeppink;
        }

        #wrap p {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: absolute;
            top: 40px;
            left: 10px;
            font-size: 24px;
            line-height: 200px;
            text-align: center;
            display: none;
        }

        #wrap p.active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <button class="active">菜单1</button><button>菜单2</button><button>菜单3</button>
        <p class="active">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
    </div>

</body>

</html>


<script>
    var wrap = document.getElementById('wrap');
    var btns = wrap.getElementsByTagName('button');
    var ps = wrap.getElementsByTagName('p');
    console.log(btns, ps);
    // 2.每一个
    for (var i = 0; i < btns.length; i++) {
        // 自定义索引
        btns[i].index = i;
        btns[i].onclick = function () {
            console.log(this.index);
            for (var j = 0; j < ps.length; j++) {
                ps[j].className = '';
                btns[j].className = '';
            }
            // 指定下标
            ps[this.index].className = 'active';
            btns[this.index].className = 'active';
        }
    }
</script>


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>选项卡</title>
<style>
        ul{
            list-style: none;
            background:#f5f5f5;
            width: 420px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin:0 auto;
        }
        ul li{
            float: left;
            margin-right: 36px;
            border-top: 1px solid transparent;
            cursor: pointer;
        }
        ul li:first-child{
            border-top: 1px solid green;
            color: green;
        }
        .news{
            width: 462px;
            height: 200px;  
            margin:0 auto;
            display: none;
        }
        .news:nth-of-type(1){
            display: block;
        }
        .news>p{
            border-bottom: 3px solid #f5f5f5;
            padding-bottom: 12px;
        }
    </style>
</head>
<body>
    <ul id="title">
        <li>推荐</li>
        <li>国内</li>
        <li>国际</li>
        <li>娱乐</li>
        <li>体育</li>
        <li>科技</li>
    </ul>
    <div class="news">
        <p>这是推荐新闻1</p>
        <p>这是推荐新闻2</p>
        <p>这是推荐新闻3</p>
    </div>
    <div class="news">
        <p>这是国内新闻1</p>
        <p>这是国内新闻2</p>
        <p>这是国内新闻3</p>
    </div>
    <div class="news">
        <p>这是国际新闻1</p>
        <p>这是国际新闻2</p>
        <p>这是国际新闻3</p>
    </div>
    <div class="news">
        <p>这是娱乐新闻1</p>
        <p>这是娱乐新闻2</p>
        <p>这是娱乐新闻3</p>
    </div>
    <div class="news">
        <p>这是体育新闻1</p>
        <p>这是体育新闻2</p>
        <p>这是体育新闻3</p>
    </div>
    <div class="news">
        <p>这是科技新闻1</p>
        <p>这是科技新闻2</p>
        <p>这是科技新闻3</p>
    </div>

<script src="js/index.js"></script>

</body>

</html>
<script>

window.onload = function(){
            //获取到每一个标题,返回的是一个类数组，所以下面要用循环，为每一项设置点击事件
            //"title"只是ul的id 标题在li中，所以要.children
            var item = document.getElementById("title").children;
            //获取到每一个新闻内容，返回一个类数组
            var news = document.getElementsByClassName("news");

            //给导航标题设置点击事件
            for (var i = 0; i < item.length; i++) {
                //为每个导航标题设置index值，之后我们把这个值传给news并作为news的索引
                //这样就能将导航标题与下方的新闻一一对应起来
                item[i].index = i;
                item[i].onclick = function(){
                    //排他
                    // paiTa();
                    //给标题戴绿帽并让他变绿^_^
                    this.style.color = "green";
                    this.style.borderTop = "1px solid green";
                    // 把index值传给news，让对应的新闻显示，这里的this指的是当前点击的item
                    news[this.index].style.display = "block";
                }
            }
            
              //1.先给导航自身排他。把大家设置为原来的样式，然后再把自己变绿这样就只有自己是绿色的。
              //2.再给下方内容排他。先把所有的新闻内容隐藏，再把相应的新闻内容显示出来。
            function paiTa(){
                for (var j = 0; j < item.length; j++) {
                    item[j].style.color = "#000";
                    item[j].style.borderTop = "1px solid transparent";
                    news[j].style.display = "none";
                }
            }
        }

</script>