jquery實現選項卡切換

阿新 • • 發佈：2019-01-28

選項卡在網頁中很常見，可以說是必備的一個元素了，網上其實也有很多案例講解選項卡的做法，各種炫酷。
寫這篇文章，就是記錄下自己的一個練手Demo了。

兩張簡陋的圖。

這裡寫圖片描述

主要邏輯就在於找到選項卡和內容框相對應的下標。

<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<style 
>
.tab{width:400px;height:400px;border:1px solid red;}
.tab-menu{height:100px;width:400px;border:1px solid grey;}
.tab-menu ul{list-style:none;}
.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}
.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}
/* 讓第一個框顯示出來 */
.tab-box 
 div:first-Child{display:block;} 
/* 改變選項卡選中時候的樣式 */
.change{background:red;} 
</style>
<script>
$().ready(function(){
    $(".tab-menu li").mouseover(function(){
    //通過 .index()方法獲取元素下標，從0開始，賦值給某個變數
        var _index = $(this).index();
    //讓內容框的第 _index 個顯示出來，其他的被隱藏
        $(".tab-box>div" 
).eq(_index).show().siblings().hide();
    //改變選中時候的選項框的樣式，移除其他幾個選項的樣式
    $(this).addClass("change").siblings().removeClass("change");
    });
});
</script>
<body>
    <div class="tab">
        <div class="tab-menu">
            <ul>
                <li>新服</li>
                <li>爆服</li>
                <li>大服</li>
            </ul>
        </div>
        <div class="tab-box">
            <div>123</div>
            <div>456</div>
            <div>789</div>
        </div>
    </div>
</body>
</html>

jquery實現選項卡切換

選項卡在網頁中很常見，可以說是必備的一個元素了，網上其實也有很多案例講解選項卡的做法，各種炫酷。寫這篇文章，就是記錄下自己的一個練手Demo了。兩張簡陋的圖。主要邏輯就在於找到選

javascript實現選項卡切換的4種方法

ivar ack doc width -s utf tel 選項定義方法一：for循環+if判斷當前點擊與自定義數組是否匹配 <html lang="en"> <head> <meta charset="UTF-8"> &l

原生js、jQuery實現選項卡功能

lap span size open absolute index http jquery html 在大家在網上平常瀏覽網頁的時候，想必各位都會看到選項卡功能，在這裏給大家詳解一下用原生js、jQuery如何來寫一些基本的選項卡話不多說，先給各位看一下功能圖：

vue實現選項卡切換效果

效果如下：說明：這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

html+css+js實現選項卡切換

html+css+js選項卡原理：先把所有的隱藏，再把當前的顯示出來效果如下：一、Html頁面佈局 Html頁面佈局由三個按鈕（input）和三個div組成，三個按鈕中總有一個

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

JQuery實現選項卡

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#ulList{margin: 0;padding: 0;}#ul

小程式選項卡操作同時支援左滑右滑實現選項卡切換功能

在這裡用了一下swiper原理：但是出現了一個問題，父級高度為0，子元素全部不顯示，檢視原因，是因為swiper預設為position：absolute，定位導致的，所以需要在style上計算出他當前的高度並且渲染在頁面上，另一個問題是，當前的高度預設為px，而小程式支援的是

Jquery Tab 選項卡切換

jquery Tab 選項卡切換直接上程式碼，以下為最基本的選項卡切換以下為效果圖 <!DOCTYP

js實現選項卡切換

window.onload=function(){ //獲取每個li var aLi = document.querySelectorAll('ul li'); //獲取每個div var aDiv = document.querySe

三行jquery實現選項卡效果

選項卡特效的實現實現選項卡特效，先講一下大致的思路. 1.用一個大的div 包裹住一個ul ，ul ,裡面再接四個小的li,和四個可以點選的span ，用按鈕等代替也行。 html程式碼結構大致如下，設定背景色是為了看出效果，最後一個是預設展開，可以自

jquery實現選項卡效果

效果圖如下： css程式碼如下： *{ margin: 0; padding: 0; } .obox ul li{ list-style: none; width: 100px; height: 30px; text-ali

用jquery實現選項卡效果（非常漂亮，帶動畫效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

jQuery實現TAB選項卡切換特效簡單演示

本文例項為大家分享jQuery實現TAB選項卡切換特效，供大家參考，具體內容如下1、tab切換 on?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

實現vue-router來完成選項卡切換

spa utf bar -- 出口 ont view 通過 asc <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-route

js實現tab選項卡切換

　　通過原生js實現tab切換，首先講解一下實現的原理。　　　　1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色　　　　2.點選按鈕其實就是把相應的div給顯示出來。　　　　需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原

原生js實現tab選項卡切換功能

本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s

純JS實現tab選項卡切換效果

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！注意事項：css程式碼中有一個隱藏其他div的屬性， display: none;這個一定要注意，要不然你寫的都會顯示出來 html程式碼： <!DOCTYPE html> <html la

Axure實現Tab選項卡切換功能

這幾天用Axure畫原型圖的過程中，需要實現Tab選項卡切換的效果，但Axure中並沒有類似於Tab控制元件的部件，所以可以用Axure中的動態面板(Dynamic Panel)來實現

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

在製作網頁過程中，我們可能會遇到各種常用的經典網頁特效，比如Banner圖片滾動、選項卡迴圈播放、右下角廣告彈窗、評論提交展示、選項動態增刪、剪刀石頭布小遊戲等等等。。。是不是感覺都見到過這些場景、那些這些場景都是如何實現的呢？今天，小瑞老師就一口氣把所有經典網頁特效效果送給大家！！！

jquery實現選項卡切換

相關推薦