基於超鏈接的單擊切換到新選項卡

Question

在電子商務商店的產品頁面上，我試圖根據超鏈接的單擊切換到另一個選項卡。

因此，從產品描述中，我有一個“閱讀常見問題解答”鏈接，單擊該鏈接后，我想自動切換到“常見問題解答”標簽。

參見此處： http : //www.lifestyleclotheslines.com.au/austral-addaline-35-foldown-clothesline

我試圖復制這種提琴的基礎知識，但是運氣不佳，我確定自己做錯了什么。

$(document).ready(function() {
    $('#myTabs').tabs();

    $('#showTab1').click(function() {
        $('#myTabs').tabs('select', '#tabone');
    });

    $('#showTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });
});

http://jsfiddle.net/zEwQz/495/

任何幫助都是極好的。

謝謝！

Answer 1

<div id="myTabs">    
    <ul  class="tabs">
        <li><a href="#tabone">Tab One</a></li>
        <li><a href="#tabtwo">Tab Two</a></li>
        <li><a href="#faqtab">Faq Tab</a></li>
    </ul>

    <div id="tabone">You've selected Tab 1</div>
    <div id="tabtwo">You've selected Tab 2</div>
    <div id="faqtab">You've selected Faq Tab</div>
</div>

<a href="#" id="showFaqTab">Read the FAQ</a>

<input type="button" id="showTab1" value="Show tab 1"/>
<input type="button" id="showTab2" value="Show tab 2"/>



 $(document).ready(function() {
        $('#myTabs').tabs();

        $('#showTab1').click(function() {
            $('#myTabs').tabs('select', '#tabone');
        });

        $('#showTab2').click(function() {
            $('#myTabs').tabs('select', '#tabtwo');
        });
        $('#showFaqTab').click(function() {
            $('#myTabs').tabs('select', '#faqtab');
        });
    });

不確定您在尋找什么。 請看看更新的小提琴

http://jsfiddle.net/zEwQz/500/

Answer 2

您對錨鏈接和按鈕都具有相同的id屬性，即（網頁上元素的ID是唯一的）

<a href="#" id="showTab2">Read the FAQ</a>

<input type="button" id="showTab2" value="Show tab 2"/>

嘗試更改它，它將起作用。

<a href="#" id="lnkshowTab2">Read the FAQ</a>

<input type="button" id="showTab2" value="Show tab 2"/>



$(document).ready(function() {
    $('#myTabs').tabs();

    $('#showTab1').click(function() {
        $('#myTabs').tabs('select', '#tabone');
    });

    $('#showTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });

        $('#lnkshowTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });
});

演示