JQuery實(shí)現(xiàn)多級(jí)tab切換

!DOCTYPE?html

創(chuàng)新互聯(lián)建站提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)，品牌網(wǎng)站設(shè)計(jì)，廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上千余家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

html?lang="en"

head

meta?charset="UTF-8"

titleDocument/title

script?src="jquery-3.3.1.js"/script

style

.Tab{

}

.Tab?span{

margin-right:10px;

cursor:pointer;

}

/style

/head

body

div?class="Tab"

spanA1/span

spanB2/span

spanC3/span

/div

div?style="display:?none"?class="tab1"

div

AA1

div?style="display:?none;margin-left:?100px;"

pAAA1/p

pAAA1/p

pAAA1/p

/div

/div

div

AA2

div?style="display:?none;margin-left:?100px;"

pAAA2/p

pAAA2/p

pAAA2/p

/div

/div

div

AA3

div?style="display:?none;margin-left:?100px;"

pAAA3/p

pAAA3/p

pAAA3/p

/div

/div

/div

div?style="display:?none"?class="tab1"

div

BB1

div?style="display:?none;margin-left:?100px;"

pBBB1/p

pBBB1/p

pBBB1/p

/div

/div

div

BB2

div?style="display:?none;margin-left:?100px;"

pBBB2/p

pBBB2/p

pBBB2/p

/div

/div

div

BB3

div?style="display:?none;margin-left:?100px;"

pBBB3/p

pBBB3/p

pBBB3/p

/div

/div

/div

div?style="display:?none"?class="tab1"

div

CC1

div?style="display:?none;margin-left:?100px;"

pCCC1/p

pCCC1/p

pCCC1/p

/div

/div

div

CC2

div?style="display:?none;margin-left:?100px;"

pCCC2/p

pCCC2/p

pCCC2/p

/div

/div

div

CC3

div?style="display:?none;margin-left:?100px;"

pCCC3/p

pCCC3/p

pCCC3/p

/div

/div

/div

/body

script

$(function(){

$(".Tab?span").each(function(i){

$(this).click(function(){

$(".tab1:eq("+i+")").show().siblings(".tab1").hide()

})

})

$(".tab1div").click(function(){

$(this).find("div").show()

$(this).siblings("div").find("div").hide()

})

})

/script

/html

jquery點(diǎn)擊圖標(biāo)來回切換的幾種方法（如開關(guān)

先給導(dǎo)航塊的a標(biāo)簽設(shè)置img屬性和data-img屬性；img屬性為未選中圖片，data-img為選中圖片。第一個(gè)按鈕的img圖片應(yīng)設(shè)置為默認(rèn)選中的狀態(tài)。

//點(diǎn)擊每個(gè)按鈕后進(jìn)行按鈕切換圖片操作

$(".tab-bar-item").on("click",?function?()?{

//先const clickImg變量為他的data屬性（選中圖片） ，然后找到img圖片的src屬性將未選中的圖片點(diǎn)擊后替換為選中圖片

const?clickImg?=?$(this).data("img");

$(this).find("img").attr("src",clickImg);

//找到被點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽，用each遍歷 const noclick為未選中的img圖片，將點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽的img換為未選中圖片就可以了

$(this).siblings().each(function(){

const?noclickImg=?$(this).attr("img")

$(this).find("img").attr("src",noclickImg);

})

}

jQuery簡單tab切換效果實(shí)現(xiàn)方法

本文實(shí)例講述了jQuery簡單tab切換效果實(shí)現(xiàn)方法。分享給大家供大家參考。具體如下：

script

src="js/jquery-latest.js"/script

SCRIPT

language=javascript

type=text/javascript

$(document).ready(function

()

{

$('.tabtitle

li').click(function

()

{

var

index

=

$(this).index();

$(this).attr('class',"tabhover").siblings('li').attr('class','taba');

$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();

});

var

t

=

0;

var

timer

=

setInterval(function(){

if(

t

==

$('.tabtitle

li').length

)

t

=

0;

$('.tabtitle

li:eq('+t+')').click();

t++;

},

700)

})

/SCRIPT

div

class="maintab"

ul

class="tabtitle"

li

class="tabhover"a

href="#"選擇標(biāo)題1/a/li

li

class="taba"a

href="#"選擇標(biāo)題2/a/li

li

class="taba"a

href="#"選擇標(biāo)題3/a/li

li

class="taba"a

href="#"選擇標(biāo)題4/a/li

li

class="taba"a

href="#"選擇標(biāo)題5/a/li

/ul

div

class="tabcontent"

選擇內(nèi)容1

/div

div

class="tabcontent"

style="DISPLAY:

none"

選擇內(nèi)容2

/div

div

class="tabcontent"

style="DISPLAY:

none"

選擇內(nèi)容3

/div

div

class="tabcontent"

style="DISPLAY:

none"

選擇內(nèi)容4

/div

div

class="tabcontent"

style="DISPLAY:

none"

選擇內(nèi)容5

/div

/div

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

jquery怎么實(shí)現(xiàn)tab切換

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

script src="../jquery-1.8.3.min.js"/script

style type="text/css"

.box{

width: 80%;

height: 300px;

border: solid 1px #eeeeee;

margin: 0 auto;

}

.box .tab_header ul{

margin: 0;

padding: 0;

width: 100%;

height: 50px;

display: flex;

line-height: 50px;

justify-content: space-between;

border-bottom: solid 1px #eeeeee;

}

.box .tab_header ul li{

width: 33%;

border-right: solid 1px #eeeeee;

list-style: none;

text-align: center;

}

.current{

background-color: #eeeeee;

color: #08BECE;

}

.hide{

display: none;

}

/style

/head

body

div class="box"

!--這個(gè)是tab切換標(biāo)題--

div class="tab_header"

ul

li class="current"tab1/li

litab2/li

litab3/li

/ul

!--這個(gè)是要顯示的內(nèi)容部分--

div class="tab_content"

divtab1的內(nèi)容/div

div class="hide"tab2的內(nèi)容/div

div class="hide"tab3的內(nèi)容/div

/div

/div

/div

script type="text/javascript"

var $asd=$(".tab_header ul li");

$asd.click(function(){

$(this).addClass("current").siblings().removeClass("current");

var $index=$asd.index(this);

var $content=$(".tab_content div");

$content.eq($index).show().siblings().hide();

});

/script

/body

/html

這個(gè)是效果圖

網(wǎng)站標(biāo)題：jquery切換tab,jquery切換焦點(diǎn)
文章URL：http://jinyejixie.com/article40/dsecpeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站改版、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)