如何在idTabs插件的JS代码段中添加fadeIn和fadeOut？

Question

我正在使用jQuery插件idTabs [[www.sunsean.com/idTabs][1]]，它允许我通过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 ，它具有自己的选项卡，并且具有自己的选项卡内容；还有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>

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

Answer 1

我已经检查了您提到的页面，“高级”部分->“动画”中有一个解决方案。 我已经对其进行了一些修改并进行了测试，看起来还不错：

在<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>

干杯

G。

如何在idTabs插件的JS代码段中添加fadeIn和fadeOut？

问题描述

1 个解决方案

解决方案1
0 已采纳 2010-12-31 12:41:51

如何在idTabs插件的JS代码段中添加fadeIn和fadeOut？

问题描述

1 个解决方案

解决方案1 0 已采纳 2010-12-31 12:41:51

解决方案1
0 已采纳 2010-12-31 12:41:51