Jquery 如何使两个垂直选项卡（左侧和右侧）在中心的同一内容框上工作>；

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

我希望新列具有与第一列相同的属性，因为我希望添加更多选项卡。这将是一个长而难看的列，但使用2将更好

以下是我尝试过的：

html

罗马文人墨客酒店


波帕阿里纳酒店

纳迪亚·帕斯库




马特马蒂卡茶酒店


波尔弗拉德城市酒店

迪亚科努伊利酒店

戈尔恰小提琴




信息的

温布拉特加布里埃拉

尼斯特·安库塔



林巴·恩格尔扎

温布拉特加布里埃拉

尼斯特·安库塔



热尔马纳

温布拉特加布里埃拉

尼斯特·安库塔

我想出了一个简单的解决方案：

html:

演示：

当然，它仍然需要一些改变才能正常工作

如果您愿意更改垂直选项卡的源代码，只需更改一行即可

更改：

activeIndex=$（this.parent（）.prevAll（）.length

与：
activeIndex=tabs.index（$（this.parent（））
这个想法很好，但我的问题是如何更改javascript以在同一内容框上正常工作？css和html并不是那么难，但是让标签在同一个框上工作是非常困难的difficult@AdiMicutzu我做了一个小小的改变，我想现在一切都会好起来的。
<div class="verticalslider" id="textExample">
            <ul class="verticalslider_tabs">
                <li><a href="#">Catedra de Limba si Literatura Romana</a></li>
                <li><a href="#">Catedra de Matematica</a></li>
                <li><a href="#">Catedra de Informatica</a></li>
                <li><a href="#">Limba engleza</a></li>  
                <li><a href="#">Limba Germana</a></li>
            </ul>
            <ul class="verticalslider_contents">
                <li>
                <h2>Catedra de Limba si Literatura Romana</h2></br>
                <p id="profesor">
                Popa Alina </br>
                Nadia Pascu</br>
                </p>
                </li>

                <li>
                    <h2>Catedra de Matematica</h2></br>
                    <p id="profesor">
                    Ciubotariu Boer-Vlad </br>
                    Diaconu Ilie</br>
                    Gorcea Violin </br>
                    </p>
                </li>

<li>
                <h2>informatica</h2>
                    <p id="profesor">
                    Wainblat Gabriela</br>
                    Nistor Ancuta</br>
                </li>

                <li>
                <h2>Limba Engleza</h2>
                    <p id="profesor">
                    Wainblat Gabriela</br>
                    Nistor Ancuta</br>
                </li>

                <li>
                <h2>Germana</h2>
                    <p id="profesor">
                    Wainblat Gabriela</br>
                    Nistor Ancuta</br>
                </li>

        </ul>
</div> 

<ul class="verticalslider_tabs right">
    <li><a href="#">Catedra de Limba si Literatura Romana</a>
    </li>
    <li><a href="#">Catedra de Matematica</a>
    </li>
    <li><a href="#">Catedra de Informatica</a>
    </li>
    <li><a href="#">Limba engleza</a>
    </li>
    <li><a href="#">Limba Germana</a>
    </li>
</ul>
<ul class="verticalslider_tabs">
    <li><a href="#">Catedra de Limba si Literatura Romana</a>
    </li>
    <li><a href="#">Catedra de Matematica</a>
    </li>
    <li><a href="#">Catedra de Informatica</a>
    </li>
    <li><a href="#">Limba engleza</a>
    </li>
    <li><a href="#">Limba Germana</a>
    </li>
</ul>

   .verticalslider_tabs {
        float: left;
        width: 220px;
    }
    .verticalslider_tabs.right {
        float:right;
    }
    .verticalslider_contents {
        display: block;
        margin: 0px;
        padding: 0px;
        overflow:hidden;
    }