如何更改jquery以使某些垂直标签正常工作？

Question

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

以下是我的尝试：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"
    });
});

Answer 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
     })
});