求JQ大神帮忙，怎么实现自动切换选项卡，下面贴上我想实现的代码！~跪求！~~ 20
<body><divclass="cont"><divclass="pic"><divclass="liston">第一个</div><divclass="list">第...
<body>
<div class="cont">
<div class="pic">
<div class="list on">第一个</div>
<div class="list">第二个</div>
<div class="list">第三个</div>
</div>
<div class="item">第一屏</div>
<div class="item">第二屏</div>
<div class="item">第三屏</div>
</div>
<script>
$(document).ready(function(){
$(".item").hide().eq(0).slideToggle(1000);
$(".pic .list").click(function(){
var s = $(".pic .list").index(this);
$(this).addClass("on").siblings().removeClass("on");
$(".item").hide().eq(s).slideToggle(1000);
})
var num = $(".pic").find(".list").length;
//var sum = $(".cont").find(".item").length;
var timer= setInterval(function(){
$(".list").eq(num).click()
},2000);
});
</script>
</body> 展开
<div class="cont">
<div class="pic">
<div class="list on">第一个</div>
<div class="list">第二个</div>
<div class="list">第三个</div>
</div>
<div class="item">第一屏</div>
<div class="item">第二屏</div>
<div class="item">第三屏</div>
</div>
<script>
$(document).ready(function(){
$(".item").hide().eq(0).slideToggle(1000);
$(".pic .list").click(function(){
var s = $(".pic .list").index(this);
$(this).addClass("on").siblings().removeClass("on");
$(".item").hide().eq(s).slideToggle(1000);
})
var num = $(".pic").find(".list").length;
//var sum = $(".cont").find(".item").length;
var timer= setInterval(function(){
$(".list").eq(num).click()
},2000);
});
</script>
</body> 展开
2个回答
展开全部
给你段代码 你自己看看
<html>
<head>
<title>简洁Tab</title>
<style type="text/css">
body{ padding:0；}
/*选项卡1*/
#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}
/*选项卡2*/
#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }
/*菜单class*/
.lib_tabborder{border:1px solid #95C9E1;}
.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{
margin:0px;padding:0px;list-style:none; position:absolute; top:3px;
left:0; margin-left:10px; height:25px;text-align:center;
}
.lib_Menubox li{
float:left;display:block;cursor:pointer;width:114px;color:#949694;
font-weight:bold; margin-right:2px;height:25px;line-height:25px;
background-color:#E4F2FD
}
.lib_Menubox li.hover{
padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;
border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;
color:#739242;height:25px;line-height:25px;
}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}
</style>
<script>
function setTab(name,cursel,n){
for(var i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">标题1</li>
<li id="one2" onclick="setTab('one',2,4)" >标题2</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_one_1" >内容1</div>
<div id="con_one_2" style="display:none">内容2</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>简洁Tab</title>
<style type="text/css">
body{ padding:0；}
/*选项卡1*/
#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}
/*选项卡2*/
#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }
/*菜单class*/
.lib_tabborder{border:1px solid #95C9E1;}
.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{
margin:0px;padding:0px;list-style:none; position:absolute; top:3px;
left:0; margin-left:10px; height:25px;text-align:center;
}
.lib_Menubox li{
float:left;display:block;cursor:pointer;width:114px;color:#949694;
font-weight:bold; margin-right:2px;height:25px;line-height:25px;
background-color:#E4F2FD
}
.lib_Menubox li.hover{
padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;
border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;
color:#739242;height:25px;line-height:25px;
}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}
</style>
<script>
function setTab(name,cursel,n){
for(var i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">标题1</li>
<li id="one2" onclick="setTab('one',2,4)" >标题2</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_one_1" >内容1</div>
<div id="con_one_2" style="display:none">内容2</div>
</div>
</div>
</body>
</html>
追问
这是JS...并且里面也没有自动切换的功能...
追答
在你写的定时器里面，调你切换的方法就可以了
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码没有问题呀？
追问
这个只是手动的 我已经加入计时器了 但是我想实现可以循环自动切换的
追答
<script>
$(document).ready(function(){
var num = $(".pic").find(".list").length,
index = 0;
$(".item").hide().eq(0).slideToggle(1000);
$(".pic .list").click(function(){
var s = $(".pic .list").index(this);
$(this).addClass("on").siblings().removeClass("on");
$(".item").hide().eq(s).slideToggle(1000);
index = $(this).index();
})
var timer= setInterval(function(){
$(".list").eq(index+1>num?0:index+=1).click()
},2000);
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
