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。

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

1 个答案: