189 8069 5689
本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下：
成都创新互联公司主营海伦网站建设的网络公司,主营网站建设方案,成都app软件开发,海伦h5小程序制作搭建,海伦网站营销推广欢迎海伦等地区企业咨询
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程序设计有所帮助。
[img]!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
$(function() {
//选项卡
$(".order_list ul li").click(function() {
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态(添加on)
var index = $(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".order_xxk div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
});
});
div class='order_list'
ul
li1/li
li2/li
/ul
/div
div class="order_xxk"
div class="yige"1/div
div class="erge"2/div
/div
timer=setTimeout("start_autochange()",1000);
第二个参数表示延迟执行的时间，单位为毫秒，1000表示为延迟1秒执行