javascript - 通过javascript链接href以单击选项卡中的按钮

有一个（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>

这是我的问题，当我使用链接到选项卡2中的按钮3时：

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

不过，这很有效；但我不想先看到tab2的页面，然后再看到button3的页面。
如何改进代码以便直接转到选项卡2中的按钮3？

最佳答案

这是我在fiddle中的问题代码：
http://jsfiddle.net/vincida/o0rb09ry/34/
但是单击按钮时的内容来自ajax，我不知道如何用fiddle编写ajax，所以它被iframe替换。
在小提琴中，它并没有显示出我所面对的情况。
在fiddle中，当我在tab1中按“GoToButton3Tab2”时，网站会直接转到tab2的按钮3。
在我的情况下，当我按tab1中的“GoToButton3Tab2”时，网站总是通过tab2的button1的内容，然后转到tab2的button3。
我想那是因为我在window.onload时将tab2的按钮3设置为active
所以我通过替换

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

到

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

但还有一个问题，当我在tab1中按“GoToButton3Tab2”时，网站会经过空tab2，然后转到tab2的按钮3。
所以，我通过改变.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的按钮3。

关于javascript - 通过javascript链接href以单击选项卡中的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27917966/