0

我有一些垂直选项卡，我想添加更多，但我想在第一个垂直选项卡的右侧添加。第一个在左侧，在它们旁边是内容框，我希望在这个内容框之后是一组新的垂直选项卡，它们将应用于同一个内容框。这是我想要的图像（我在 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>
4

1 回答 1

2

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

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());

于 2013-03-20T07:28:43.480 回答