大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jquery的tab切换,jquery tab

JQUERY的TAB标签,我想实现5秒钟自动切换的效果,怎么做

下面这段代码替换你原来的js代码,亲测可用……

创新互联公司于2013年创立,先为游仙等服务建站,游仙等地企业,进行企业商务咨询服务。为游仙企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

原理:

1.设置了一个定时器,每2秒触发。

2.如果用户自己切换,停止定时器。当用户鼠标离开区域时,再次进入定时切换。

不懂再问~    

$(function(){

var i=0;//初始记录用户鼠标经过是第几个li

var canmove=true;

$('.menu li').mouseenter(function(){

canmove=false;

clearInterval(li_timer);

i=$(this).index();

$(this).addClass('off').siblings().removeClass('off');

$('.menudiv div').hide();

$('.menudiv div').eq(i).show(); 

});

$("#tab1").mouseenter(function(){//只要用户鼠标在这个tab1区域内,就不自动跳转

canmove=false;

}).mouseleave(function(){

clearInterval(li_timer);

setTimeout(function(){canmove=true;},2000);//两秒后自动切换

});

function li_timer(){

if(canmove){

i++;

if(i==$('.menu li').length){

i=0;

}

$('.menu li').eq(i).addClass('off').siblings().removeClass('off');

$('.menudiv div').hide();

$('.menudiv div').eq(i).show(); 

}

}

setInterval(li_timer,2000);//每两秒切换

});

用jquery怎么实现tab切换

html

head

titleTab Demo/title

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

style type="text/css"

*{ margin: 0; padding: 0;}

.container{ width: 1000px; height: auto;  margin: 0 auto; border: 1px solid #4e4e4e;}

.tab-head{ width: 100%; height: 50px;border-bottom: 1px solid #4e4e4e; }

.tab-head ul{ width: 100%; height: 50px; list-style: none;}

.tab-head ul .normal-li{ width: 150px; height: 50px;  float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #fff; color: #111; cursor: pointer;}

.tab-head ul .selected-li{ width: 150px; height: 50px;  float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #111; color: #fff;}

.tab-content{ width: 100%; height: auto;}

.tab-content ul{ width:100%; height: auto; list-style: none;}

.tab-content ul li{ width:100%; height: 500px; display:none; }

/style

script type="text/javascript" src="jquery.min.js"/script

script type="text/javascript"

var currentIndex=0;

$(document).ready(function(){

$(".tab-head ul li").click(function(){

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

if(currentIndex!=index) {

currentIndex=index;

$(this).removeClass("normal-li").addClass("selected-li");

$(this).siblings().removeClass("selected-li").addClass("normal-li");

var contents=$(".tab-content").find("li");

$(contents[index]).show();

$(contents[index]).siblings().hide();

}

});

});

/script

/head

body

div class="container"

div class="tab-head"

ul

li class="selected-li"导航/li

li class="normal-li"推荐/li

li class="normal-li"购物/li

li class="normal-li"视频/li

/ul

/div

div class="tab-content"

ul

li style="background-color: antiquewhite; display: block;"导航/li

li style="background-color:antiquewhite ;"推荐/li

li style="background-color:antiquewhite ;"购物/li

li style="background-color:antiquewhite ;"视频/li

/ul

/div

/div

/body

/html

JQuery实现多级tab切换

!DOCTYPE html

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怎么实现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程序设计有所帮助。

jQuery怎么实现tab页切换效果

简略写的

style

.big{

width:100px;

}

.tabtit ul li.active{

background:red;

color:#fff;

}

.tabtit ul li:hover{

background:red;

color:#fff;

}

.tabcon ul li{

width:100px;

height:100px;

}

/style

div class="big"

div class="tabtit"

ul

li1/li

li2/li

li3/li

/ul

/div

div class="tabcon"

ul

li style="background:#007FFF;"1/li

li style="background:#00DD1C;"2/li

li style="background:#9ACD32;"3/li

/ul

/div

/div

script

var titList = $(".tabtit ul li"); //获取选项卡标题

var contList = $(".tabcon ul li");//获取选项卡切换的内容

//默认显示第一个选项卡标题

titList.eq(0).addClass("active").siblings().removeClass("active");

//默认显示第一个选项卡切换的内容

contList.eq(0).show().siblings().hide();

titList.click(function(){

var titnub = $(this).index(); //获取点击当前标题的index值

//当前点击的标题添加class,并移除同级的class

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

//显示相同index值的内容

contList.eq(titnub).show().siblings().hide();

})

/script


网站名称:jquery的tab切换,jquery tab
文章起源:http://dzwzjz.com/article/phsicj.html
在线咨询
服务热线
服务热线:028-86922220
TOP