idTabsプラグインのJSスニペットにfadeInとfadeOutを追加するには？

私はjQueryのプラグインidTabs [[www.sunsean.com/idTabs][1]]を使用していますし、それは私がタブと素子＃IDと要素のhref = 『＃IDは』idTabsプラグインのJSスニペットにfadeInとfadeOutを追加するには？

を経由して、タブのコンテンツを整列することができます

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

は、2つの異なる領域上でプラグインを実行するには：[OK]をので、私はこのスニペットを使用div#requestPoolこれは、それが自身のタブとそれ自身のタブのコンテンツ、また別の場所であり、それは自身のタブのしていると、それはだdiv.tabsをのしています独自のタブコンテンツ。

div.miniTabsとdiv.switchersは、タブのリンク（タブヘッダ）を備えdiv要素であり、私は、今.activeと

.activePanelに.selectedからデフォルト選択したタブのクラスを変更するスニペットでそれらをパット何I追加するのが好きなのは、それらをブラウズしている間、タブのコンテンツに素晴らしい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>

どうもありがとうございました（再びタブは非常に細かい作業が、私は持っていたいフェード効果なしています）。

出典

2010-12-31 iMagdy

私があなたが言及したページをチェックしたところ、そこには高度なセクション - >アニメーションの解決策があります。私はそれを少し変更してテストしてみた、罰金だ：<head>で

：

<body>で

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

：

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

乾杯

出典

2010-12-31 12:41:51

はありがとうグレゴリー – iMagdy

idTabsプラグインのJSスニペットにfadeInとfadeOutを追加するには？

答えて

関連する問題