Question

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

Answer 1

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

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

如何使2个垂直标签（左和右）在中心的同一内容框上工作＆gt;

1 个答案: