zoukankan      html  css  js  c++  java
  • ES6前后实现排它的两种写法

    排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
    </head>
    <body>
    <ul>
        <li class="current">我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
    </ul>
    
    </body>
    </html>
    

    css代码

    <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                margin: 100px auto;
                 300px;
                height: 400px;
                border: 1px solid #000;
            }
            ul>li{
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 10px;
                cursor: default;
            }
    
            .current{
                background-color: brown;
            }
        </style>
    

    JavaScript代码

    <script>
        /*
        // es6之后的写法
        let items = document.querySelectorAll("li");
        let previousIndex = 0;
        for (let i = 0; i < items.length; i++) {
            // let currentItem = items[i];
            items[i].onclick = function () {
                items[previousIndex].className = "";
                this.className = "current";
                previousIndex = i;
                // console.log(previousIndex);
            };
        }
        */
    
        // es6之前的写法
        var items = document.querySelectorAll("li");
        var previousIndex = 0;
        for (var i = 0; i < items.length; i++) {
            (function (index) {
                items[index].onclick = function () {
                    items[previousIndex].className = "";
                    this.className = "current";
                    previousIndex = index;
                };
            })(i);
        }
    </script>
    

    运行效果

  • 相关阅读:
    南阳779
    南阳599
    南阳484
    margin叠加相邻两个元素的上下margin是叠加在一起
    margin
    padding
    css05 字体以及行间距
    mysql相似于oracle的to_char() to_date()方法
    sqlite两表更新update
    SQL查找重复项目
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12805235.html
Copyright © 2011-2022 走看看