通過javascript鏈接href以單擊選項卡中的按鈕

Question

有一個（Bootstrap）網站，如下所示：

<ul id="myTab">
    <li><a href="#tab1">TAB1</a></li>
    <li><a href="#tab2">TAB2</a></li>
    <li><a href="#tab3">TAB3</a></li>
</ul>

<div id="myTabContent">
    <div id="tab1">
        <!--tab1 content-->
    </div>
    <div id="tab2">
        <div>
            <button id="button1">BUTTON1</button>
            <button id="button2">BUTTON2</button>
            <button id="button3">BUTTON3</button>
        </div>
    </div>
    <div id="tab3">
        <!--tab3 content-->
    </div>
</div>

這是我的問題，當我使用tab2中的button3鏈接時：

<a href="javascript: 
    $('#myTab li:eq(1) a').tab('show');
    $('#button3').click();
    $('html,body').scrollTop(0);">GoToButton3Tab2
</a>

雖然有效， 但我不想先看到該頁面的tab2，然后再看到button3。

如何改善我的代碼，以便可以直接轉到選項卡2中的button3？

Answer 1

這是我的小提琴中的問題代碼： http : //jsfiddle.net/vincida/o0rb09ry/34/

但是單擊按鈕時的內容來自ajax，而且我不知道如何用小提琴編寫ajax，因此將其替換為iframe。

擺弄，它沒有顯示我所面對的情況。

擺弄時，當我在tab1中按“ GoToButton3Tab2”時，網站直接轉到tab2的button3。

在我的情況下，當我在tab1中按下“ GoToButton3Tab2”時，網站總是通過tab2的button1的內容，然后再轉到tab2的button3。

我猜這是因為在window.onload時將tab2的button3設置為活動

所以我通過替換來解決

window.onload = function() {
    document.getElementById("button1").click();
}

至

$(function () {
    $('#myTab li:eq(1)').click(function() {
        document.getElementById("button1").click();
    });
});

但是還有另一個問題，當我在tab1中按“ GoToButton3Tab2”時，網站會通過空白的tab2，然后轉到tab2的button3。

因此，我通過更改.tab（'show'）和.click（）的順序來解決此問題

<a href="javascript: 
    $('#myTab li:eq(1) a').tab('show');
    $('#button3').click();
    $('html,body').scrollTop(0);">GoToButton3Tab2
</a>

至

<a href="javascript: 
    $('#button3').click();
    $('#myTab li:eq(1) a').tab('show');
    $('html,body').scrollTop(0);">GoToButton3Tab2
</a>

現在，當我在tab1中按“ GoToButton3Tab2”時，網站將直接轉到tab2的button3。