有一个(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/

10-09 14:14