文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将fadeIn和fadeOut添加到idTabs插件的JS代码片段中？

问如何将fadeIn和fadeOut添加到idTabs插件的JS代码片段中？
EN

Stack Overflow用户

提问于 2010-12-31 16:46:19

回答 1查看 699关注 0票数 0

我使用的是jQuery插件idTabs [ www.sunsean.com/idTabs ]，它允许我通过element#id和element href="#id“来显示选项卡和选项卡的内容。

好的，所以我使用这个代码片段：

<script type="text/javascript">
$(document).ready(function() {
 $("#requestPool").idTabs();
 $(".tabs").idTabs();
 $(".miniTabs").idTabs(".active"); 
 $(".switchers").idTabs(".activePanel");
});
</script>

在两个不同的区域运行这个插件：div#requestPool this有它自己的标签和标签内容，还有div.tabs，它是另一个地方，有它自己的标签和标签内容。

div.miniTabs和div.switchers是包含选项卡链接(选项卡头)的div，我将它们放入代码片段中，以便将默认选择的选项卡类从.selected更改为.active和.activePanel

现在，我想要添加一个很好的fadeIn和fadeOut效果到我的标签内容，同时浏览它们。

谢谢

下面是其中一个选项卡区域的HTML代码：

<div id="requestPool">
 <!-- The tabs heads -->
 <div class="miniTabs">
  <a href="#today" class="active">Today</a> <!-- First active tab -->
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
  <a href="#monday">Monday</a>
  <a href="#tuesday">Tuesday</a>                                  
 </div>

 <!-- The tabs contents (the ones that I want them to fade in and out while browsing through them using the tabs above) -->
 <div id="today"class="miniTab"></div>
 <div id="tomorrow"class="miniTab"></div>
 <div id="friday"class="miniTab"></div>
 <div id="saturday"class="miniTab"></div>
 <div id="sunday"class="miniTab"></div>
 ...etc the week days
</div>

非常感谢(再说一次，选项卡工作得很好，但没有我想要的淡入淡出效果)。

javascript

jquery

jquery-plugins

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-12-31 20:41:52

我已经查看了你提到的页面，在高级部分->动画中有一个解决方案。我对它做了一些修改和测试，看起来还不错：

在<head>中

<script type="text/javascript">
$(function(){
    $(".miniTabs").idTabs(function(id,list,set){ 
        $("a",set).removeClass("active").filter("a[href='"+id+"']").addClass("active"); 
        for(i in list)$(list[i]).hide();
        $(id).fadeIn(); 
        return false; 
    }); 
});
</script>

在<body>中

<div id="requestPool">
 <div class="miniTabs">
  <a href="#today" class="active">Today</a>
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
 </div>
 <div id="today"class="miniTab">Today</div>
 <div id="tomorrow"class="miniTab">Tomorrow</div>
 <div id="friday"class="miniTab">Friday</div>
 <div id="saturday"class="miniTab">Saturday</div>
 <div id="sunday"class="miniTab">Sunday</div>
</div>

干杯

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4569061

复制

相似问题

问如何将fadeIn和fadeOut添加到idTabs插件的JS代码片段中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将fadeIn和fadeOut添加到idTabs插件的JS代码片段中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将fadeIn和fadeOut添加到idTabs插件的JS代码片段中？
EN