1

例のコードを使用していますhttp://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ divタグをスライドさせようとしていますリストのボタンをクリックすると、現在のタブのコンテンツがスライドインし、クリックしたばかりのタブがスライドアウトします。現在、div をうまく切り替えることができる実例がありますが、div 間をスライドインおよびスライドアウトする必要があります。現在のコードでこれを実行できるスクリプトはありますか。.show() の代わりに .slide または .effect を使用すると、2 つの div が同時に表示されるように見えます。何が間違っているのかわかりません。

<div id="v-nav">
<ul>
    <li tab="tab1" class="first current">Main Screen</li>
    <li tab="tab2">Div 1</li>
    <li tab="tab3">Div 2</li>
    <li tab="tab4">Div 3</li>
    <li tab="tab5">Div 4</li>
    <li tab="tab6">Div 5</li>
    <li tab="tab7">Div 6</li>
    <li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
   <h4>Main Screen</h4>
</div>
<div class="tab-content">
    <h4>Div 1</h4>
</div>
<div class="tab-content">
    <h4>Div 2</h4>
</div>
<div class="tab-content">
    <h4>Div 3</h4>    
</div>
<div class="tab-content">
    <h4>Div 4</h4>                   
</div>
<div class="tab-content">
    <h4>Div 5</h4>                   
</div>
<div class="tab-content">
    <h4>Div 6</h4>                   
</div>
    <div class="tab-content">
    <h4>Div 7</h4>  
</div>

私のスクリプトは次のようになります

$(function () {
var items = $('#v-nav>ul>li').each(function () {
    $(this).click(function () {
        //remove previous class and add it to clicked tab
        items.removeClass('current');
        $(this).addClass('current');

        //hide all content divs and show current one
        //$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();

        //$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);    

        $('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
        window.location.hash = $(this).attr('tab');
    });
});

if (location.hash) {
    showTab(location.hash);
}
else {
    showTab("tab1");
}

function showTab(tab) {
    $("#v-nav ul li:[tab*=" + tab + "]").click();
}

// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
    showTab(location.hash.replace("#", ""));
})

// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();

});
4

1 に答える 1

0

Vertical jQuery UI Tabsを試してください。少しスタイルを変える必要があるかもしれませんが、効果はあなたが望むものだと思います. http://api.jqueryui.com/slide-effect/からスライド効果をタブ変更イベントに追加できるはずです。

于 2012-11-21T16:53:05.897 に答える