Javascript jQuery idTabs-使用鼠标悬停自动更改和淡入淡出
我正在使用jQueryJavascript jQuery idTabs-使用鼠标悬停自动更改和淡入淡出,javascript,jquery,idtabs,Javascript,Jquery,Idtabs,我正在使用jQueryidTabs重新设计我的网站。我根据我的内容设计了它,它看起来很棒,但是有几个函数缺少我所需要的 首先,我现在使用的是: <script type="text/javascript"> $("#featured").idTabs("!mouseover"); </script> 唯一的问题是它不能很好地处理mouseover事件。它不会在每一个鼠标上方淡入,而是自动改变 有人能帮我解决这个问题吗 非常感谢!谢谢 在这里,我已经完成了在某个
idTabs
重新设计我的网站。我根据我的内容设计了它,它看起来很棒,但是有几个函数缺少我所需要的
首先,我现在使用的是:
<script type="text/javascript">
$("#featured").idTabs("!mouseover");
</script>
唯一的问题是它不能很好地处理mouseover
事件。它不会在每一个鼠标上方淡入,而是自动改变
有人能帮我解决这个问题吗
非常感谢!谢谢 在这里,我已经完成了在某个时间间隔内自动更改选项卡的完整容器,无需鼠标悬停或单击。请检查演示链接一次
演示:
HTML
<div>
<div id="adv2">
<ul>
<li>
<a class="selected" href="#ani1">
1
</a>
</li>
<li>
<a href="#ani2">
2
</a>
</li>
<li class="split">
</li>
<li>
<a href="#ani3">
3
</a>
</li>
<li>
<a href="#ani4">
4
</a>
</li>
</ul>
<span>
<p id="ani1">
Click on the tabs to see a nice fade.
</p>
<p id="ani2">
You're not impressed?
</p>
<p id="ani3">
But it's so cool... in a nerdy way.
</p>
<p id="ani4">
Download idTabs and have your cake. You can eat it too.
</p>
</span>
</div>
</div>
}))
**CSS:**
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}
演示:是否有办法在单击其中一个选项卡时重新启动计时器?是的,您可以将计时器分配给某个变量,然后使用clearInterval timer=setInterval(函数(){},1800);在点击一些按钮定时器和clearInterval(定时器)时,我真的不知道该怎么做。这是您可以添加到当前代码中的内容吗?非常感谢您,keyur!非常感谢;D
$(function() {
var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
var current = $("#adv2 ul a.selected").attr("href");
var index = ($.inArray(current, tabList) + 1) % tabList.length;
tabClick(tabList[index], tabList, tabDiv);
}
var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
if (!tabList) {
tabList = list;
}
if (action && action.event == "click") {
timer && clearInterval(timer);
timer = setInterval(rotate, interval);
}
$("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
for (i in list) {
$(list[i]).hide();
}
$(id).fadeIn();
return false;
}
$("#adv2").idTabs(tabClick);
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}