带有上一个和下一个按钮的垂直JQuery选项卡_Jquery_Tabs

带有上一个和下一个按钮的垂直JQuery选项卡

jquery tabs

带有上一个和下一个按钮的垂直JQuery选项卡,jquery,tabs,Jquery,Tabs,我发现这个标签Jquery插件，非常适合我的网站。（） 1）如何添加同一脚本的多个实例（当前会破坏插件） ------我的尝试----- 下面是我用来尝试拥有多个实例的代码： // this is the original code $(function () { var items = $('#v-nav>ul>li').each(function () { $(this).click(function () {

我发现这个标签Jquery插件，非常适合我的网站。（）

1）如何添加同一脚本的多个实例（当前会破坏插件）

------我的尝试----- 下面是我用来尝试拥有多个实例的代码：

// this is the original code 
$(function () {
        var items = $('#v-nav>ul>li').each(function () {
            $(this).click(function () {
                //remove previous class and add it to clicked tab
                items.removeClass('p_current');
                $(this).addClass('p_current');
                //hide all content divs and show current one
                $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast'); 
                showTab($(this).attr('tab'));
            });
        });
        showTab("tab_pants1");
        function showTab(tab) {
            $("#v-nav ul li:[tab=" + tab + "]").click();
        } 
    });

以下是上述javascript的关联HTML：

<div id="option_container"> 
    <div id="v-nav">
        <ul>
            <li tab="tab_pants1" class="first">STYLE <img src="img/site/check1.png" width="15px" class="check collar"></li>
            <li tab="tab_pants2">BUTTON <img src="img/site/check1.png" width="15px" class="check button"></li>
        </ul>
        <div class="tab-content">
             <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>
        <div class="tab-content">
            <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton"  id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>  
</div><!--end of option container-->

以下是第二个选项卡系统的关联HTML：

<div id="option_container"> 
    <div id="v-nav">
        <ul>
            <li option="option1" class="first">STYLE <img src="img/site/check1.png" width="15px" class="check collar"></li>
            <li option="option2" class="last">BUTTON <img src="img/site/check1.png" width="15px" class="check button"></li>
        </ul>
        <div class="option-content">
             <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>
        <div class="option-content">
            <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton"  id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>
    </div>
</div><!--end of option container-->



样式
按钮

上面的代码可以工作，但下面的代码不行。我已经更改了所有必要的css类和ID，但它不起作用。。。。

这是我创建的测试站点的链接：

您能指定多个实例是什么意思吗？你所做的只是将“标签”改为“选项”@jayna我的意思是有两套不同的标签。一个标签制度是为了一件事，另一个标签制度是为了另一件事对不起，我还是不明白。你是说在标签中包含标签吗？我编辑了这个问题。这是有错误的标签。我应该能够在同一页上使用两个选项卡系统：您不能有

#选项容器和div#v-nav两次。您只能使用ID一次
<div id="option_container"> 
    <div id="v-nav">
        <ul>
            <li option="option1" class="first">STYLE <img src="img/site/check1.png" width="15px" class="check collar"></li>
            <li option="option2" class="last">BUTTON <img src="img/site/check1.png" width="15px" class="check button"></li>
        </ul>
        <div class="option-content">
             <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="collarImg"><br><input class="optionCollar" id="optionRadio" type="radio" name="collar" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>
        <div class="option-content">
            <div id="option">
                <table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton"  id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td> 
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio" type="radio" name="Button" value="1"></td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" class="buttonImg"><br><input class="optionButton" id="optionRadio"type="radio" name="Button" value="1"></td>
                    </tr>
                </table>    
            </div>
            <div id="option_preview">
                <img src="img/option/collar.png" width="335px">
            </div>
        </div>
    </div>
</div><!--end of option container-->