tab切换jquery,TAB切换效果

JQuery实现多级tab切换

!DOCTYPE html

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、成都做网站、武昌网络推广、小程序开发、武昌网络营销、武昌企业策划、武昌品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供武昌建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

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点击图标来回切换的几种方法(如开关

先给导航块的a标签设置img属性和data-img属性;img属性为未选中图片,data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。

//点击每个按钮后进行按钮切换图片操作

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

//先const clickImg变量为他的data属性(选中图片) ,然后找到img图片的src属性将未选中的图片点击后替换为选中图片

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

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

//找到被点击标签的其他兄弟标签,用each遍历 const noclick为未选中的img图片,将点击标签的其他兄弟标签的img换为未选中图片就可以了

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

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

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

})

}

jquery怎么实现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"

!--这个是tab切换标题--

div class="tab_header"

ul

li class="current"tab1/li

litab2/li

litab3/li

/ul

!--这个是要显示的内容部分--

div class="tab_content"

divtab1的内容/div

div class="hide"tab2的内容/div

div class="hide"tab3的内容/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

这个是效果图

jQuery简单tab切换效果实现方法

本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下:

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="#"选择标题1/a/li

li

class="taba"a

href="#"选择标题2/a/li

li

class="taba"a

href="#"选择标题3/a/li

li

class="taba"a

href="#"选择标题4/a/li

li

class="taba"a

href="#"选择标题5/a/li

/ul

div

class="tabcontent"

选择内容1

/div

div

class="tabcontent"

style="DISPLAY:

none"

选择内容2

/div

div

class="tabcontent"

style="DISPLAY:

none"

选择内容3

/div

div

class="tabcontent"

style="DISPLAY:

none"

选择内容4

/div

div

class="tabcontent"

style="DISPLAY:

none"

选择内容5

/div

/div

希望本文所述对大家的jQuery程序设计有所帮助。

网站标题:tab切换jquery,TAB切换效果
网页URL:https://www.cdcxhl.com/article14/dscioge.html

成都网站建设公司_创新互联,为您提供网站排名网站营销品牌网站设计标签优化网站设计网站策划

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站制作