如何使2个垂直选项卡（左和右）在中心的同一内容框上工作> [英] how can i make 2 vertical tabs ( left and right ) work on the same content box in the center>

问题描述

我有一些垂直标签，我想添加更多，但我想添加到第一个垂直选项卡的右侧。第一个是在左边，在他们旁边有内容框，我想要这个内容框后是一组新的垂直选项卡，将应用于同一内容框。这是一个我想要的图片（我在Photoshop中制作）： http：//s14.postimage .org / 4mi4kx15d / what_i_need.jpg

我希望新列具有与第一列相同的属性，因为我想添加更多标签是一个长而丑陋的列，但有2会更好

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

html

 < div class =verticalsliderid =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 =＃>信息资料< / 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小提琴< / 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 =＃>信息资料< / 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 =＃>信息资料< / a> 
< / li> 
< li>< a href =＃> Limba engleza< / a> 
< / li> 
< li>< a href =＃> Limba Germana< / a> 
< / li> 
< / ul> 
  

CSS：

 code> .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/

当然还需要一些更改为正常功能。

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

更改：
activeIndex = $（this）.parent（）。prevAll（）。length; / p>

其中：
activeIndex = tabs.index（$（this）.parent（））; / p>

I have some vertical tabs and i want to add more, but i want to add the to the right of the first vertical tabs. First ones are on the left and next to them there is the content box, well i want after this content box to be a new set of vertical tabs which will apply on the same content box. Here is an image with what i want ( i made it in photoshop ) : http://s14.postimage.org/4mi4kx15d/what_i_need.jpg

I want the new column to have the same properties as the first column because I want to add more tabs it will be a long and ugly column, but with 2 will be better

Here is what I have tried: 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> 

解决方案

I came up with a simple solution:

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

demo: http://jsfiddle.net/pavloschris/26zQS/19/

Of course it still needs some changes to be normaly functional.

If you're willing to change the source code of the vertical tabs you just have to change one line to make it work.

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

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

这篇关于如何使2个垂直选项卡（左和右）在中心的同一内容框上工作>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！