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

Question

我发现这个标签 Jquery 插件非常适合我的网站。（http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-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-->

这是我对新实例的新代码的编辑

$(function () {
        var itemsOption = $('#v-nav>ul>li').each(function () {
            $(this).click(function () {
                //remove previous class and add it to clicked tab
                itemsOption.removeClass('option_current');
                $(this).addClass('option_current');
                //hide all content divs and show current one
                $('#v-nav>div.option-content').hide().eq(itemsOption.index($(this))).show('fast'); 
                showOption($(this).attr('option'));
            });
        });
        showOption("option1");
        function showOption(option) {
            $("#v-nav ul li:[option=" + option + "]").click();
        } 
    });

这是第二个选项卡系统的相关 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，但它不起作用....这是我制作的测试站点的链接：http: //monarcbrand.com/alpha/test.php