正文
jquerytab,jquery table
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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
这个是效果图
相关问答
Q1: 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程序设计有所帮助。
Q2: 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
Q3: JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做
下面这段代码替换你原来的js代码，亲测可用……
原理：
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);//每两秒切换
});
