0

いくつかの垂直タブがあり、さらに追加したいのですが、最初の垂直タブの右側に追加したいと考えています。最初のものは左側にあり、その隣にはコンテンツ ボックスがあります。このコンテンツ ボックスの後に、同じコンテンツ ボックスに適用される垂直タブの新しいセットが必要です。これが私が欲しいものの画像です（私はフォトショップで作成しました）：

IMAGEはここにあるに違いない

これが私が試したことです: http://jsfiddle.net/26zQS/18/ しかし、両方の列で動作するようにjqueryを変更する方法がわかりません

HTML

<div class="verticalslider" id="textExample">
    <ul class="verticalslider_tabs right">
        <li><a href="#">1-right</a>

        </li>
        <li><a href="#">2-right</a>

        </li>
        <li><a href="#">3-right</a>

        </li>
        <li><a href="#">4-right</a>

        </li>
        <li><a href="#">5-right</a>

        </li>
    </ul>
    <ul class="verticalslider_tabs">
        <li><a href="#">1-left</a>

        </li>
        <li><a href="#">2-left</a>

        </li>
        <li><a href="#">3-left</a>

        </li>
        <li><a href="#">4-left</a>

        </li>
        <li><a href="#">5-left</a>

        </li>
    </ul>
    <ul class="verticalslider_contents">
        <li>Nothing</li>
        <li>
                <h2>Activitate 1</h2>
ADI</li>
        <!-- elementul al doilea -->
        <li>
                <h2>Nunc Adipiscing</h2>

            <p>CUC adipiscing purus id orci rutrum placerat. Nam posuere elementum ipsum quis faucibus. Fusce fermentum turpis ac erat mollis sit amet varius mi placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante justo, varius quis dignissim nec, condimentum in dui. Nulla sed lectus eu nunc vehicula vulputate vel nec velit. Integer eu purus nunc. Donec odio augue, sagittis pellentesque adipiscing id, dignissim vel enim. Maecenas a risus est.</p>
        </li>
        <li>
                <h2>Praesent Dapibus</h2>

            <p>Praesent dapibus metus vitae velit blandit tempor. Donec dignissim tempus neque, a vestibulum massa aliquam sed. Vestibulum velit quam, facilisis vel pharetra nec, bibendum eget mauris. In vitae ligula ac justo varius ullamcorper. Nullam vitae urna eu metus pellentesque vehicula vel sit amet nibh. Cras nec velit dictum neque imperdiet congue in nec eros. Suspendisse ante felis, eleifend sed pellentesque id, sagittis ut magna. .</p>
        </li>
        <li>
                <h2>Praesent Dapibus</h2>

        </li>
    </ul>
</div>

jQuery

$(document).ready(function () {
    $("#textExample").verticaltabs({
        speed: 500,
        slideShow: false,
        activeIndex: 0
    });
    $("#imageExample").verticaltabs({
        speed: 1000,
        slideShow: true,
        slideShowSpeed: 3000,
        activeIndex: 0,
        playPausePos: "topRight"
    });
});
4

1 に答える 1

1

ここに私の JS コードと JSFiddle へのリンクがあります: http://jsfiddle.net/uTAAU/19/ あなたの HTML を少し変更したことに注意してください。

$(document).ready(function () {
    $('.verticalslider_tabs li a').on('click',function(){
        var noumber = $(this).attr('id').replace('tab',''); // Here I check with element was clicked and take it noumber

        $('.verticalslider_tabs li.activeTab').removeClass('activeTab'); // I'm looking for li with class activeTab, when I get it I? remove that class
        $(this).parent().addClass('activeTab'); // Now I'm adding class activeTab to the li (parent of clickrd a element) so the border won't be displayed
        $('.verticalslider_contents li.activeContent').hide().removeClass('activeContent'); // Now I'm hidding the active tab
        $('.verticalslider_contents li[data-tab="'+noumber+'"]').fadeIn(500).addClass('activeContent'); // Here is fade in and adding activeContent class to an element
     })
});
于 2013-03-20T11:02:30.647 に答える