1. 排他思想

排他思想

当点击其中一个按钮的时候改变该按钮的背景颜色。并将其他按钮的背景颜色恢复。
需要利用一个排他思想：在设置选中的按钮之前需要将其他按钮的颜色恢复。
代码实现:

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
  let btns = document.querySelectorAll('button');
  for (let 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 = 'skyblue';
    }
  }
</script>
</body>

2. 页面换肤

页面换肤

为每一张图片循环设置点击事件，当点击某一张图片的时候修改body的背景图片backgroundImage。并将当前设置的图片缩览图使用不同颜色的边框区别。
这里利用了排他思想实现选中某张图片标注不同颜色的边框。
代码实现：

 * {
      margin: 0;
      padding: 0;
    }

    body {
      background: url(../images/1.jpg) no-repeat center top;
      background-size: cover;
      box-sizing: border-box;
    }

    ul {
      width: 1000px;
      list-style: none;
      padding: 0;
      margin: 100px auto;
    }

    li {
      float: left;
      margin: 20px;
      cursor: pointer;
      border: 5px solid #fff;
    }

    li img {
      /* 默认图片下面有一个空白缝隙需要转换为块级元素 */
      display: block;
      width: 200px;
    }

<body>
<ul class="baidu">
  <li><img src="../images/1.jpg" alt=""></li>
  <li><img src="../images/2.jpg" alt=""></li>
  <li><img src="../images/3.jpg" alt=""></li>
  <li><img src="../images/4.jpg" alt=""></li>
</ul>
<script>
  let img = document.querySelector('.baidu').querySelectorAll('img');
  let li = document.querySelector('.baidu').querySelectorAll('li');
  for (let i = 0; i < img.length; i++) {
    img[i].onclick = function () {
      document.body.style.backgroundImage = 'url(' + this.src + ')';
      for (let j = 0; j < li.length; j++) {
        li[j].style.borderColor = '#fff';
      }
      li[i].style.borderColor = 'pink';
    }
  }
</script>
</body>