前端猫

# 排它思想

排它思想：排除所有人（包括自己），然后设置自己。在很多地方都有运用到排他思想。

# - 第一个按钮背景颜色为红色

  • 效果：

  • 代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个按钮背景颜色为红色-前端猫</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    button{
      padding:5px;
      margin:5px;
    }
    button.active{
      background: red;
    }
  </style>
</head>
<body>
<div>
  <button>体育新闻</button>
  <button>娱乐新闻</button>
  <button>财经新闻</button>
</div>
</body>
<script>
  var btn = document.querySelector("button");
  btn.onclick = function(){
    btn.classList.add("active");
  }
</script>
</html>

# - 点击任一按钮，所有为红色

  • 效果：

  • 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击任一按钮，所有为红色 - 前端猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            padding: 5px;
            margin: 5px;
        }

        button.active {
            background: red;
        }
    </style>
</head>
<body>
<div>
    <button>体育新闻</button>
    <button>娱乐新闻</button>
    <button>财经新闻</button>
</div>
</body>
<script>
    // 方案1 - 依次为按钮增加事件
    // var btns = document.querySelectorAll("button");
    // btns[0].onclick = function(){
    //     btns.forEach(function (item){
    //       item.className = "active";
    //     })
    // }
    // btns[1].onclick = function(){
    //   btns.forEach(function (item){
    //     item.className = "active";
    //   })
    // }
    // btns[2].onclick = function(){
    //   btns.forEach(function (item){
    //     item.className = "active";
    //   })
    // }

    // 方案2- 通过forEach为按钮增加事件
    // var btns = document.querySelectorAll("button");
    // btns.forEach(function (item){
    //    item.onclick = function(){
    //       // 将所有的按钮增加上active
    //      btns.forEach(function (item){
    //          item.className = "active";
    //      })
    //    }
    // })

    // 方案3- 通过for为按钮增加事件
    var btns = document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
      // 增加事件
      btns[i].onclick = function () {
        for (var j = 0; j < btns.length; j++) {
          btns[j].className = "active";
        }
      }
    }
</script>
</html>

# - 点击按钮为红色，清除其它

  • 效果

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>只让点击的按钮为红色，其它按钮没有背景颜色 - 前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        button{
            padding:5px;
            margin:5px;
        }
        button.active{
            background: red;
        }
    </style>
</head>
<body>
<div>
    <button>体育新闻</button>
    <button>娱乐新闻</button>
    <button>财经新闻</button>
</div>
</body>
<script>
    // 1-forEach  -->this保留自己
    // // 获得所有按钮
    // var btns = document.querySelectorAll("button");
    // // 为所有按钮增加上单击事件
    // btns.forEach(function (item){
    //     item.onclick = function(){
    //         // 将当前点击的按钮背景颜色变为红色（增加class,属性值为active)
    //         // 将其余的按钮背景颜色移除掉。
    //         // console.log(this);// this代表当前点击的按钮。
    //         btns.forEach(function (item){
    //             item.className = null;// 将所有按钮的背景去掉。
    //         })
    //         this.className = "active";// 保留当前点击按钮的背景
    //     }
    // })
    
    // 排它思想：干掉其它，保留自己
    // 2- forEach
    var btns = document.querySelectorAll("button");
    btns.forEach(function (item,index){
        item.onclick = function(){
            btns.forEach(function (item){
                item.className = null;
            })
            // item.className="active";//保留自己
            // console.log(index);//
            // btns[index].className = "active";// 保留自己
        }
    })  
</script>
</html>

# - 借助中间值完成功能

  • 效果

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排它思想优化-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        button{
            padding:5px;
            margin:5px;
        }
        button.active{
            background: red;
        }
    </style>
</head>
<body>
<div>
    <button>体育新闻</button>
    <button>娱乐新闻</button>
    <button>财经新闻</button>
</div>
</body>
<script>
    // // 方案1-for
    // var btns = document.querySelectorAll("button");
    // // 将选中的按钮的下标进行记录。
    // var activeIndex = -1;// -1说明未点击过任何按钮。
    // // 为按钮增加单击事件
    // for(var i=0;i<btns.length;i++){
    //     btns[i].dataset.index = i;
    //     btns[i].onclick = function(){
    //         // 将当前选择的按钮背景颜色设置为null
    //         if(activeIndex>-1) btns[activeIndex].className =null;
    //
    //         // 将当前点击的按钮的下标作为activeIndex的值。
    //         activeIndex = this.dataset.index/1;
    //         btns[activeIndex].className = "active";
    //     }
    // }

    // 方案2-forEach
    var btns = document.querySelectorAll("button");
    var activeIndex = -1;
    btns.forEach(function (item,index){
        item.onclick = function(){
            if(activeIndex>-1) btns[activeIndex].className = null;
            activeIndex = index;// 更改为点击按钮的下标
            btns[activeIndex].className = "active";
        }
    })
</script>
</html>

# - 完成切换功能

# - 乞丐版切换功能

  • 效果

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乞丐版切换-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #root {
            width: 500px;
            margin:0px auto;
        }
        #root button{
            padding:5px;
            margin:5px;
        }
        #root div{
            width: 500px;
            height: 200px;
            border:1px solid yellow;
        }

    </style>
</head>
<body>
<div id="root">
    <button>娱乐新闻</button>
    <button>体育新闻</button>
    <button>财经新闻</button>
    <div>娱乐新闻列表</div>
    <div>体育新闻列表</div>
    <div>财经新闻列表</div>
</div>
</body>
<script>
    var btns = document.querySelectorAll("#root button");
    var divs = document.querySelectorAll("#root div");
    // 当前选中的下标
    var activeIndex = 0;
    // 1 让按钮当中的娱乐新闻背景为红色
    // 2 让除了娱乐新闻以外的div隐藏
    // 3 为按钮增加事件
    divs.forEach(function (item,index){
        item.style.display = "none";
        btns[index].onclick = function(){
            // 将当前选中的下标对应的按钮移除背景色
            btns[activeIndex].style.background = null;
            divs[activeIndex].style.display = "none";
            // 将当前点击按钮的下标更新至activeIndex
            activeIndex = index;
            // 更新当前按钮的颜色
            btns[activeIndex].style.background = "red";
            divs[activeIndex].style.display = "block"
        }
    })
    btns[activeIndex].style.background = "red";
    divs[activeIndex].style.display = "block";
</script>
</html>

# - 乞丐版切换优化

  • 效果

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乞丐版切换优化-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #root {
            width: 500px;
            margin:0px auto;
        }
        #root button{
            padding:5px;
            margin:5px;
        }
        #root div{
            width: 500px;
            height: 200px;
            border:1px solid yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <button>娱乐新闻</button>
    <button>体育新闻</button>
    <button>财经新闻</button>
    <div>娱乐新闻列表</div>
    <div>体育新闻列表</div>
    <div>财经新闻列表</div>
</div>
</body>
<script>
    var btns = document.querySelectorAll("#root button");
    var divs = document.querySelectorAll("#root div");
    // 当前选中的下标
    var activeIndex = 0;
    // 1 让按钮当中的娱乐新闻背景为红色
    // 2 让除了娱乐新闻以外的div隐藏
    // 3 为按钮增加事件
    divs.forEach(function (item,index){
        hide(index);// 调用hide函数
        btns[index].onclick = function(){
            // 将当前选中的下标对应的按钮移除背景色
            hide();
            // 将当前点击按钮的下标更新至activeIndex
            activeIndex = index;
            // 更新当前按钮的颜色
            show();
        }
    })
    show();
    function show(){
        // 显示DIV，添加按钮背景颜色
        btns[activeIndex].style.background = "red";
        divs[activeIndex].style.display = "block"
    }
    function hide(index=activeIndex){
        // 隐藏DIV，去除按钮背景颜色
        btns[index].style.background = null;
        divs[index].style.display = "none";
    }
</script>
</html>

# - 增加不同背景颜色

  • 效果

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为不同的新闻增加不同的背景颜色-前端猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            width: 500px;
            margin: 0 auto;
        }

        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root div {
            width: 500px;
            height: 200px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <button>娱乐新闻</button>
    <button>体育新闻</button>
    <button>财经新闻</button>
    <div>娱乐新闻列表</div>
    <div>体育新闻列表</div>
    <div>财经新闻列表</div>
</div>
</body>
<script>
    var btns = document.querySelectorAll("#root button");
    var divs = document.querySelectorAll("#root div");
    // 1- 设置数组保存颜色
    var arrColor = ["red", "green", "blue"]
    var activeIndex = 0;// 当前选中的下标
    divs.forEach(function (item, index) {
        hide(index);
        btns[index].onclick = function () {
            hide();
            activeIndex = index;
            show();
        }
    })
    show();

    function show() {
        // 2-以上两行代码可以写成如下一行：
        btns[activeIndex].style.background = divs[activeIndex].style.background = arrColor[activeIndex];
        divs[activeIndex].style.display = "block"
    }

    function hide(index = activeIndex) {
        btns[index].style.background = null;
        divs[index].style.display = "none";
    }
</script>
</html>

# - 增加数据

  • 效果

  • 代码

    • data/index.js

      var data = [
    {
        typeTitle:"娱乐新闻",
        newsList:[
            {
                newsTitle:"《知否》女演员施诗与一男子同回公寓 疑恋情曝光",
                newsHref:"https://www.163.com/ent/article/H3IE1RMG00038FO9.html"
            },
            {
                newsTitle:"任达华女儿坐游艇穿短裙秀身材，曾华倩儿子点赞",
                newsHref:"https://www.163.com/dy/article/H3G6Q59Q0552L9ZC.html"
            }
        ]
    },{
        typeTitle: "体育新闻",
        newsList:[
            {
                newsTitle:"湖人遭鹈鹕23分逆转 欧文主场首秀篮网负黄蜂",
                newsHref:"https://sports.163.com/nba/"
            },
            {
                newsTitle:"詹皇39+9+5关键时刻却4中0 23分优势全被浪费",
                newsHref:"https://www.163.com/sports/article/H3HMF61K0005877U.html"
            }
        ]
    },{
        typeTitle: "财经新闻",
        newsList:[
            {
                newsTitle:"中国老年人婚恋：相亲积极 但再婚之路不那么平坦",
                newsHref:"https://www.163.com/dy/article/H3HGOGTA0514R9OJ.html"
            },
            {
                newsTitle:"近千亿巨头董事长：80%中国燃油车品牌将关停并转",
                newsHref:"https://www.163.com/dy/article/H3HBCESV0519D3V1.html"
            }
        ]
    }
]

    • html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加数据-前端猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            width: 500px;
            margin: 0 auto;
        }

        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root div {
            width: 500px;
            height: 300px;
            border: 1px solid yellow;
        }

    </style>
</head>
<body>
<div id="root">

</div>
</body>
<script src="data/index.js"></script>
<script>
    var root = document.querySelector("#root");
    // 初始化按钮
    root.innerHTML = data.map(function (item) {
        return `
            <button>${item.typeTitle}</button>
        `
    }).join("");

    // 初始化DIV
    root.innerHTML += data.map(function (item) {
        var str = item.newsList.map(function (info) {
            return `
                <p><a href="${info.newsHref}">${info.newsTitle}</a></p>
            `
        }).join("");
        return `
            <div>${str}</div>
        `
    }).join("");


    var btns = document.querySelectorAll("#root button");
    var divs = document.querySelectorAll("#root div");
    var arrColor = ["red", "green", "skyblue"]
    var activeIndex = 0;// 当前选中的下标
    divs.forEach(function (item, index) {
        hide(index);
        btns[index].onclick = function () {
            hide();
            activeIndex = index;
            show();
        }
    })
    show();

    function show() {
        btns[activeIndex].style.background = divs[activeIndex].style.background = arrColor[activeIndex];
        divs[activeIndex].style.display = "block"
    }

    function hide(index = activeIndex) {
        btns[index].style.background = null;
        divs[index].style.display = "none";
    }
</script>
</html>

# - 构造函数版

  • 效果

  • 代码

    • lib/Tag.js

      function Tag(options={}){
    this.btns = document.querySelectorAll("#"+(options.el || "root")+" button");
    this.divs = document.querySelectorAll("#"+(options.el || "root")+" div");
    this.arrColor =options.arrColor || ["red","green","blue"];
    this.activeIndex = options.activeIndex || 0;// 当前选中的下标
    this.init();
}
Tag.prototype.init = function(){
    this.divs.forEach(function (item,index){
        this.hide(index);
        this.btns[index].onclick = function(){
            this.hide();
            this.activeIndex = index;
            this.show();
        }.bind(this)
    }.bind(this))
    this.show();
}
Tag.prototype.show = function(){
    this.btns[this.activeIndex].style.background = this.divs[this.activeIndex].style.background =this.arrColor[this.activeIndex];
    this.divs[this.activeIndex].style.display = "block"
}
Tag.prototype.hide = function(index=this.activeIndex){
    this.btns[index].style.background = null;
    this.divs[index].style.display = "none";
}

    • html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数版切换-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #root,#one {
            width: 500px;
            margin:0px auto;
        }
        #root button,#one button{
            padding:5px;
            margin:5px;
        }
        #root div,#one div{
            width: 500px;
            height: 200px;
            border:1px solid yellow;
        }

    </style>
</head>
<body>
<div id="root">
    <button>娱乐新闻</button>
    <button>体育新闻</button>
    <button>财经新闻</button>
    <div>娱乐新闻列表</div>
    <div>体育新闻列表</div>
    <div>财经新闻列表</div>
</div>
<hr/>
<div id="one">
    <button>中国新闻</button>
    <button>日本新闻</button>
    <button>韩国新闻</button>
    <div>中国新闻列表</div>
    <div>日本新闻列表</div>
    <div>韩国新闻列表</div>
</div>
</body>
<script src="lib/Tag.js"></script>
<script>
    // 构造函数：通过构造函数可以实例化对象。
    // 1- 将面向过程的变量作为构造函数的实例属性
    // 2- 将面向过程的函数作为构造函数的原型方法。
    new Tag({
        activeIndex:1,
    });

    new Tag({
        el:"one",
        arrColor:["gold","pink","yellow"]
    })
</script>
</html>

← 元素尺寸 →