Dom——排他思想

排他思想

概念

排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒

案例

效果如上图所示。

当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。

代码

html部分

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

javascript部分

<script>
    var btns = document.getElementsByTagName('button');
    for (i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            for (let i = 0; i < btns.length; i++) {
            // 清除所有样式
                btns[i].style.backgroundColor = '';
            }
            // 设置当前样式
            this.style.backgroundColor = 'pink';
        }
    }
</script>

tab栏切换布局

效果

效果如上图所示。

当鼠标点击上方的tab栏时，下方的区域显示对应的内容。，如下图所示。

核心思想

1. 上方tab栏部分用到了排他思想，背景颜色和字体颜色发生变化，其余样式不变；设置自定义属性，用于充当索引号。
2. 当鼠标点击上方的li时，下方的内容区域获取一一对应的自定义属性，并赋值给下方的变量index当索引号。

知识点补充

自定义属性操作
自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

1. 获取属性值 div.属性 ： 获取属性值 div.getAttribute(‘属性’);
   ※区别：div.属性获取内置属性值（元素本身自带的属性）；
   div.getAttribute(‘属性’);主要获取自定义的属性（程序员自定义的属性）
2. 设置属性值
   div.属性=‘值’; // 设置内置属性
   div.setAttribute(‘属性’,‘值’); // 主要针对自定义属性
   ※注意：如果想改类名，第一个方法要用className，第二个方法就是class
   div.className=‘新类名’;
   div.setAttribute(‘class’,‘新类名’);
3. 移除属性 div.removeAttribute(‘所要移除的属性’)

代码

html部分

<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（5000）</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">商品介绍模块内容</div>
        <div class="item">规格与包装模块内容</div>
        <div class="item">售后保障模块内容</div>
        <div class="item">商品评价（5000）模块内容</div>
        <div class="item">手机社区模块内容</div>
    </div>
</div>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    li {
        list-style: none;
    }
    
    .tab {
        width: 650px;
        margin: 100px auto;
    }
    
    .tab .tab_list {
        width: 650px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #999;
        background-color: #ccc;
    }
    
    .tab_list li {
        float: left;
        height: 33px;
        padding: 0 20px;
        cursor: pointer;
        text-align: center;
    }
    
    .current {
        background-color: #c81523;
        color: #fff;
    }
    
    .tab_con {
        clear: both;
    }
    
    .item {
        display: none;
    }
</style>

javascript部分

<script>
    var lis = document.querySelector('ul').querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    for (i = 0; i < lis.length; i++) {
        // 为5个li设置自定义属性，用于当索引号
        lis[i].setAttribute('index', i);
        lis[i].onclick = function() {

            // 1.排他思想
            for (i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';

            // 2.获取一一对应的自定义索引号,当鼠标点击了li后，获取该li的索引号index并赋值给变量index
            var index = this.getAttribute('index');
            // 这里只能用this，选中触发的事件，lis[i]则是循环最后的事件
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
        }
    }
</script>