js和css標籤內容切換功能的實作教程-js教程-PHP中文網

首頁

web前端

js教程

js和css標籤內容切換功能的實作教程

小云云

Jan 27, 2018 am 11:18 AM

cssjavascript

本文主要跟大家分享js + css實作標籤內容切換功能(實例講解)。我們先附上效果圖，並用實例代碼教大家，希望能幫助大家。

先附上效果圖與程式碼：

## html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="../js/tabs_function.js"></script>
 <script type="text/javascript">
  window.onload = function main() {
   Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

  }
 </script>
 <style type="text/css">
  #list-title {
   width: 318px;
   height: 56px;
   margin: 0;
   list-style-type: none;
   padding-left: 0;
  }

  .list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

  #content-box {
   position: relative;
   clear: both;
   width: 314px;
   height: 302px;
   margin: 0 2px;
  }

  .contents {
   position: absolute;
   left: 0;
   top: 0;
   width: 312px;
   height: 300px;
   margin: 0;
   font-size: 32px;
   line-height: 300px;
   text-align: center;
   border: 1px solid #000;
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
  }

  .contents-checked {
   z-index: 1;
   opacity: 1;
   visibility: visible;
  }
 </style>
</head>
<body>
<ul id="list-title">
 <li class="list-item list-item-checked">1</li>
 <li class="list-item">2</li>
 <li class="list-item">3</li>
</ul>
<p id="content-box">
 <p class="contents contents-checked" style="background-color: #c8ff40;">content_1</p>
 <p class="contents" style="background-color: #41ff6f;">content_2</p>
 <p class="contents" style="background-color: #ff82a0;">content_3</p>
</p>
</body>
</html>

#js 檔案：

/**
 * Created by Administrator on 2016/9/12.
 */

/*
 * tabs_name:用于触发事件的标签的类名；
 * contents_name:内容容器的类名；
 * tabs_checked_style:标签为选中状态时的样式；
 * contents_checked_style:内容容器为选中状态时的样式；
 *
 * classList.toggle();
 * 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；
 * */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
 var tabs = document.querySelectorAll(tabs_name),
  contents = document.querySelectorAll(contents_name),
  e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
}

原理機制

關於css中，類別的疊加效果。

我們知道，一個元素可以加入多個類別名，同時會被多個類別的樣式層疊起來顯示。

例如：

.list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

可以看到，第一個li的class屬性中，有兩個類別名稱：.list-item 和.list-item-checked。那麼這個li元素就會同時擁有這個兩個類別的樣式。

比較，第二個和第三個li的class只有：.list-item。因此他們不會擁有 .list-item-checked 所設定的樣式。

回到主題，標籤切換，實際上是取得到元素，然後修改元素的樣式。那麼其中的元素樣式就可以透過「classList」來控制元素的類別名，從而修改樣式。

簡單介紹 classList 方法。

1. element.classList 只是取得到元素的類別名稱清單。

2. element.clasList.add(value); 此方法是向元素的類別名稱清單中新增指定的類別名稱
3. element.classList.remove(value); 該方法是從元素的類別名稱清單中刪除指定的類別名稱4. element.classList.contains(value); 此方法是判斷元素的類別名稱清單中是否存在指定的類別名稱；此方法會傳回一個布林值

5. element.classList.toggle(value); 此方法是判斷元素的類別名稱清單中是否存在指定的類別名，如果存在，則刪除該類別名稱；如果不存在，則新增該類別名稱

其中，「value」的值可以為一個變數或字串常數；

 element.classList.add("class-name"); // 字符串
 element.classList.add(class_name); // 变量
 
 element.classList.remove(class_name);
 element.classList.contains(class_name); // true,false
 element.classList.toggle(class_name); // 有则删，无则添；

# #js 部分

e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }

1. “e_mark” 的作用：

e_mark = 0;

初始的「e_mark」的值為「0」。表示「e_mark」指向的是目前被選取的元素為編號是「0」的那個元素。

2. “tabs[i].num=i” 的作用：

tabs[i].num = i;

在上層的for迴圈中，「i」的值其實就是「tabs」數組中各個元素的下標值。由於「onclick」等事件的匿名函數中無法直接取得到「i」的值。也就是說，當元素被點擊時，觸發的函數無法得知是「tabs」數組中的第幾個元素被點擊了，因為每個元素都可能觸發這個函數。但是，函數可以透過「this」來得知是哪一個元素被點擊了，至於這個被點擊的元素是第幾個，可以透過這個被點擊的元素的一個自訂值來獲得。

我們在元素被點擊之前，先給這些元素綁定一個編號：num（自訂值），那麼就可以透過「this.num」來取得這個元素的編號。也就知道這個元素是「tabs」數組中的第幾個元素了。

3. 修改目前元素和更新元素的樣式：

tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);

上面說到，「 e_mark」為目前元素的編號，而「this.num」則為被點選及新選取的元素的編號。

###那麼當元素被點擊時，需要做兩件事：1.把目前被選中的元素的樣式還原到普通的樣式，2.將被點擊的元素的樣式修改為被選中時的樣式。 ######結合classList的方法，我們知道：.list-item-checked 為被選中時追加的樣式，選中的元素只需添加這個類別名稱即可，而未被選中的元素則移除這個類名。 ######相關推薦：############JS實作的另類手風琴效果網頁內容切換程式碼_javascript技巧######

以上是js和css標籤內容切換功能的實作教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。