我如何使2垂直制表符（左侧和右侧）在中心相同的内容框上工作>

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/

当然，它仍然需要一些改变是normaly功能。

如果您愿意更改垂直制表符的源代码，您只需更改一行即可使其工作。

变化： activeIndex = $(this).parent().prevAll().length;

有： activeIndex = tabs.index($(this).parent());