快捷導(dǎo)航

ES6函數(shù)實(shí)現(xiàn)排它兩種寫法解析

更新時(shí)間：2020年05月13日 14:30:03 作者：陳太浪

這篇文章主要介紹了ES6函數(shù)實(shí)現(xiàn)排它兩種寫法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

排它思想：清除其它所有的沒有選中元素的樣式, 只設(shè)置當(dāng)前選中元素的樣式

html代碼

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

</body>
</html>

css代碼

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
      margin: 100px auto;
      width: 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>

運(yùn)行效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TypeScript聲明文件的語(yǔ)法與場(chǎng)景詳解
使用ts進(jìn)行開發(fā)的時(shí)候,不可避免的需要引用第三方的 JS 的庫(kù),但是默認(rèn)情況下TS是不認(rèn)識(shí)我們引入的這些JS庫(kù)的,所以在使用這些JS庫(kù)的時(shí)候,我們就要通過聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關(guān)于TypeScript聲明文件的相關(guān)資料,需要的朋友可以參考下
2022-05-05
微信小游戲中three.js離屏畫布的示例代碼
這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結(jié)合cannon.js寫個(gè)3D小游戲，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2020-10-10
小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版
這篇文章主要介紹了小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于JS實(shí)現(xiàn)仿百度百家主頁(yè)的輪播圖效果
本文給大家分享基于html和js實(shí)現(xiàn)的仿百度百家主頁(yè)的輪播圖效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-03-03
JS event使用方法詳解
event代表事件的狀態(tài)，例如觸發(fā)event對(duì)象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。 event對(duì)象只在事件發(fā)生的過程中才有效。
2008-04-04
JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下
2014-12-12
JS實(shí)現(xiàn)給對(duì)象動(dòng)態(tài)添加屬性的方法
這篇文章主要介紹了JS實(shí)現(xiàn)給對(duì)象動(dòng)態(tài)添加屬性的方法,涉及JS屬性的遍歷、動(dòng)態(tài)賦值及eval方法的簡(jiǎn)單使用技巧,需要的朋友可以參考下
2017-01-01
layer父頁(yè)獲取彈出層輸入框里面的值方法
今天小編就為大家分享一篇layer父頁(yè)獲取彈出層輸入框里面的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js實(shí)現(xiàn)石頭剪刀布游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)石頭剪刀布游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來學(xué)習(xí)
2015-08-08