0

我有一些垂直选项卡，我想添加更多，但我想在第一个垂直选项卡的右侧添加。第一个在左侧，在它们旁边是内容框，我希望在这个内容框之后是一组新的垂直选项卡，它们将应用于同一个内容框。这是我想要的图像（我在 Photoshop 中制作的）：

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