基於jquery實作最簡單的選項卡切換效果

首頁

web前端

js教程

基於jquery實作最簡單的選項卡切換效果_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:01 PM

jquery 切換選項卡

這個功能在現在的網站中使用較為普遍，就是以選項卡的形式來對一些內容做了分類。，例如下面的天貓商城。

下面的原始碼是仿照天貓寫的一個選項卡，實現起來的效果如下。

主要是利用我們在點擊對應板塊是觸發它的點擊事件，在點擊事件中再對內容顯示框(tabbox)進行對應項目的顯示和隱藏操作。

同時利用hover為其添加了滑鼠滑過時的效果。

代碼：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <link href="css/style1.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.3.2.min.js"></script>
  <title></title>
  <script>
    $(function () {
      var $div_li = $("div.tab_menu ul li");
      $div_li.click(function () {       //定义了tan_menu对应的单击事件，也就是类别的单击事件。
        $(this).addClass("selected")
        .siblings().removeClass("selected");
        var index = $div_li.index(this);
        $("div.tab_box>div").eq(index).show()
        .siblings().hide();
      }).hover(function () {         //定义了鼠标滑过特效
        $(this).addClass("hover");
      }, function () {
        $(this).removeClass("hover");
      });
    });

  </script>
</head>
<body>
  <div class="tab">
    <div class="tab_menu">
      <ul>
        <li class="selected">时事</li>
        <li>体育</li>
        <li>娱乐</li>
      </ul>
    </div>
    <div class="tab_box">
      <div>时事</div>
      <div class="hide">体育</div>
      <div class="hide">娱乐</div>
    </div>
  </div>
</body>
</html>

登入後複製

以上就是本文的全部內容，希望對大家熟練實現選項卡切換的技巧有所幫助。

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7748

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學 Mar 20, 2024 pm 01:58 PM

Win11家庭版怎麼轉換成Win11專業版?在Win11系統中，分為了家庭版、專業版、企業版等，而大部分Win11筆電都是預先安裝Win11家用版系統。而今天小編就帶給大家win11家庭版切換專業版操作步驟!1、先在win11桌面此電腦上右鍵屬性。 2、點選更改產品金鑰或升級windows。 3、然後進入後點選更改產品金鑰。 4.再輸入啟動金鑰：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，選擇下一步。 5.接著就會提示成功，這樣就可以將win11家用版升級win11專業版了。

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

excel切換工作簿快速鍵的使用方法 Mar 20, 2024 pm 01:50 PM

在excel軟體的應用程式裡，我們已經習慣使用快捷鍵，讓有些操作變得更簡單和快捷，excel的多個表格之間有時候會有相關的數據，我們在查看時，要不停的切換工作簿，如果有更快捷的切換方法，就會省下很多切換浪費的時間，對工作效率的提高有很大的幫助，什麼辦法可以完成快速的切換呢，針對這個問題，小編今天要講的內容是：excel切換工作簿快速鍵的使用方法。 1.首先在開啟的excel表格的下方可以看到有多個工作簿，需要快速切換不同的工作簿，如下圖所示。　　2、然後按下鍵盤上的Ctrl鍵不動，如果需要向右選擇工作

認識全角與半角：切換技巧一覽 Mar 25, 2024 pm 01:36 PM

在日常生活中，我們經常會遇到全角和半角的問題，但可能很少有人深入了解它們的意義和差異。全角和半角，其實是一種字元編碼方式的概念，而在電腦輸入、編輯、排版等方面都有其特殊的應用。本文將深入探討全角和半角的差異、切換技巧以及在實際生活中的應用。首先，全角和半角在漢字文字領域中的定義是：一個全角字元佔用一個字元位置，而一個半角字元佔用半個字元位置。在計算機中，通

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

輕鬆學會全角半角切換方法 Mar 25, 2024 pm 03:42 PM

全角半角是指中文輸入法中的兩種不同輸入狀態。全角是指每個字元佔用一個全角字元位置，而半角則是每個字元佔用一個半角字元位置。使用電腦輸入中文時，有時需要在全角和半角之間切換，以適應不同的輸入場景。接下來我們就來介紹幾種常用的全角半角切換方法，讓大家輕鬆學會如何在中文輸入中進行全角半角的切換。方法一：使用快速鍵切換全角半角在大多數中文輸入法軟體中，可以使

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

See all articles

基於jquery實作最簡單的選項卡切換效果_jquery

熱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版

熱門話題