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

Question

There is a (Bootstrap)website like below:

<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>

Here is my question, when I use a link to button3 in tab2:

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

It works,though; But I don't want to see the page first to tab2 and then to button3.

How can I improve my code so that can go to button3 in tab 2 directly?

Answer 1

Here is my problem code in fiddle: http://jsfiddle.net/vincida/o0rb09ry/34/

But the content when clicking button is from ajax, and I don't know how to write ajax in fiddle, so it is replaced by iframe.

In fiddle, it doesn't show the situation what I faced.

In fiddle, when I press "GoToButton3Tab2" in tab1,the website goes to button3 of tab2 directly.

In my situation, when I press "GoToButton3Tab2" in tab1, the website always pass through content of button1 of tab2, and then goes to button3 of tab2.

I guess that is because I set button3 of tab2 to active when window.onload

so I solve it by replacing

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

to

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

But there is another problem, when I press "GoToButton3Tab2" in tab1, the website pass through empty tab2, and then goes to button3 of tab2.

so, I solve it by changing the order of .tab('show') and .click()

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

to

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

Now, when I press "GoToButton3Tab2" in tab1,the website goes to button3 of tab2 directly.