4種JavaScript實作簡單tab選項卡切換的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

4種JavaScript實作簡單tab選項卡切換的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

javascript tab 選項卡

本文實例講解了4種JavaScript實作簡單tab選項卡切換的方法，分享給大家供大家參考，具體內容如下
效果圖：

方法一：for循環+if判斷目前點擊與自訂陣列是否符合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab切换</title>
  <style type="text/css">
    button {
      width:120px;
      height: 32px;
      line-height: 32px;
      background-color: #ccc;
      font-size: 24px;
    }
    div {
      display: none;
      width:200px;
      height: 200px;
      font-size: 72px;
      color:#ddd;
      background-color: green;
      border:1px solid black;
    }
  </style>
</head>
<body>
  <button style="background-color: yellow;">1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <div style="display:block;">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <script type="text/javascript">
  //定义数组并获取数组内各个的节点
  var buttonArr = document.getElementsByTagName("button");
  var divArr = document.getElementsByTagName("div");
  for(var i = 0; i < buttonArr.length;i++) {
    buttonArr[i].onclick = function() {
      //this 
      // alert(this.innerHTML)
      //for循环遍历button数组长度
      for(var j = 0; j < buttonArr.length; j++) {
        //重置所有的button样式
        buttonArr[j].style.backgroundColor = "#ccc";
        //给当前的(点击的那个)那个button添加样式
        this.style.backgroundColor = "yellow";
        //隐藏所有的div
        divArr[j].style.display = "none";
        //判断当前点击是按钮数组中的哪一个？
        if(this == buttonArr[j]) {
          // alert(j);
           //显示点击按钮对应的div
          divArr[j].style.display = "block";
        }
      }
    }
  }
  </script>
</body>
</html>

登入後複製

方法二：自訂index為目前點選

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab切换</title>
  <style type="text/css">
    button {
      width:120px;
      height: 32px;
      line-height: 32px;
      background-color: #ccc;
      font-size: 24px;
    }
    div {
      display: none;
      width:200px;
      height: 200px;
      font-size: 72px;
      color:#ddd;
      background-color: green;
      border:1px solid black;
    }
  </style>
</head>
<body>
  <button style="background-color: yellow;">1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <div style="display:block;">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <script type="text/javascript">
  var buttonArr = document.getElementsByTagName("button");
  var divArr = document.getElementsByTagName("div");
  for(var i = 0; i < buttonArr.length;i++) {
    buttonArr[i].index = i;
    // buttonArr[i].setAttribute("index",i);
    buttonArr[i].onclick = function() {
      for(var j = 0; j < buttonArr.length; j++) {
        buttonArr[j].style.backgroundColor = "#ccc";
        buttonArr[this.index].style.backgroundColor = "yellow";
        divArr[j].style.display = "none";
        divArr[this.index].style.display = "block";
      }
    }
  }
  
  </script>
</body>
</html>

登入後複製

方法三：className

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style type="text/css">
    * {padding:0; margin:0;}
    button {
      background-color: #ccc;
      width:80px;
      height: 30px;
    }
    .btn-active {
      background-color: yellow;
      font-weight:bold;
      font-size: 14px;
    }
    div{
      width:200px;
      height: 200px;
      font-size: 64px;
      background-color: #0c0;
      display: none;
      color:#fff;
    }
    .div-active {
      display: block;
    }
  </style>
</head>
<body>
  <button class="btn-active">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <div class="div-active">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <script type="text/javascript">
  //1.先获取元素
  var buttonList = document.getElementsByTagName("button");
  var divList = document.getElementsByTagName("div");
  //2.添加事件
  for(var i = 0; i < buttonList.length; i++) {
    buttonList[i].index = i;
    buttonList[i].onclick = function() {
      for(var j = 0; j < buttonList.length;j++) {
        buttonList[j].className = "";
        divList[j].className = "";
      }
      this.className = "btn-active";
      divList[this.index].className = "div-active";
    }
  }
  </script>
</body>
</html>

登入後複製

方法四：className+匿名函數的自執行

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style type="text/css">
    * {padding:0; margin:0;}
    button {
      background-color: #ccc;
      width:80px;
      height: 30px;
    }
    .btn-active {
      background-color: yellow;
      font-weight:bold;
      font-size: 14px;
    }
    div{
      width:200px;
      height: 200px;
      font-size: 64px;
      background-color: #0c0;
      display: none;
      color:#fff;
    }
    .div-active {
      display: block;
    }
  </style>
</head>
<body>
  <button class="btn-active">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <div class="div-active">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <script type="text/javascript">
  //1.先获取元素
  var buttonList = document.getElementsByTagName("button");
  var divList = document.getElementsByTagName("div");
  //2.添加事件
  for(var i = 0; i < buttonList.length; i++) {
    (function(i){ //匿名函数自执行
       buttonList[i].onclick = function() {
        for(var j = 0; j < buttonList.length;j++) {
          buttonList[j].className = "";
          divList[j].className = "";
        }
        this.className = "btn-active";
        divList[i].className = "div-active";
      }
    })(i)
  }
  </script>
</body>
</html>

登入後複製

希望本文所述對大家學習javascript程式設計有所幫助。

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7742

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

解決CentOS7的Tab鍵無法補全指令問題 Jan 17, 2024 pm 01:30 PM

今天在centOS上做實驗，發現之前在Ubuntu下使用的比較習慣的tab鍵補全命令的方式不能使用，於是非常好奇，經過查找資料並親自測試，將可行的解決方式記錄如下：1）首先需要在終端機中執行以下指令：#yuminstallbash-completion//也可以使用通配符安裝：yuminstallbash-c*或是你可以安裝一些初始化的套件組yum-yyalinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppogroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppogroup

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

See all articles

4種JavaScript實作簡單tab選項卡切換的方法_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題