jquery - 我怎样才能使 2 个垂直选项卡(左和右)在中心的相同内容框上工作>

<分区>

我有一些垂直标签，我想添加更多，但我想在第一个垂直标签的右侧添加。第一个在左边，旁边是内容框，我想在这个内容框之后是一组新的垂直选项卡，它们将应用于相同的内容框。这是一张我想要的图片(我用 photoshop 制作的):http://s14.postimage.org/4mi4kx15d/what_i_need.jpg

我希望新列具有与第一列相同的属性，因为我想添加更多选项卡，这将是一个又长又丑的列，但有 2 个会更好

这是我尝试过的:http://jsfiddle.net/26zQS/6/

html

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

最佳答案

我想到了一个简单的解决方案:

html:

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

CSS:

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

演示:http://jsfiddle.net/pavloschris/26zQS/19/

当然，它仍然需要一些更改才能正常运行。

如果您愿意更改垂直标签的源代码，您只需更改一行即可使其正常工作。

改变: activeIndex = $(this).parent().prevAll().length;

与: activeIndex = tabs.index($(this).parent());

关于jquery - 我怎样才能使 2 个垂直选项卡(左和右)在中心的相同内容框上工作>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15516893/