为什么这个 JavaScript 函数不起作用？

Question

我正在使用引导程序并尝试在选项卡 1 中创建一个按钮，该按钮“激活”（切换到）选项卡 2。

这是我的代码：

HTML 导航标签：

    <ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
      <li><a href="#page1" data-toggle="tab">Page One</a></li>
      <li><a href="#page2" data-toggle="tab">Page Two</a></li>
    </ul>

HTML 标签内容：

<div class="tab-content" style="width:100%;">
    <div class="tab-pane active" id="page1">
        <button type="button" onclick="showPageTwo();">Proceed to page 2</button>
    </div>
    <div class="tab-pane" id="page2">
        <p>Page 2 content here!</p>
    </div>
</div>

JavaScript：

<script type="text/javascript">

$(document).ready(function() {
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    }
});

function showPageTwo() {
    $('#pageSwitcher li:eq(1) a').tab('show');
}

</script>

有人愿意提供一些关于我到底哪里出错的见解吗？我几乎完全复制了几个示例...单击选项卡本身可以正常工作，我似乎无法在第 1 页底部创建一个激活第 2 页的按钮。

Answer 1

一：糟糕的形式，内联onclick调用……你不需要它，摆脱它：

        <button type="button">Proceed to page 2</button>

二：你有两个 JS 错误。您没有关闭 .click() 函数，而是尝试使用 li:eq(0) 的说明符触发第一个选项卡...

$(document).ready(function() {
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        // ALSO, you were missing a closing paren, here!
    });

    //two issues ... onclick inside your button is trying to access
    // your function before it's available... inline js like that, bad idea anyhow
    // so hook into it inside your DOM ready code here anyhow.

    var showPageTwo = function() {
        // secondly, you're looking at the wrong item!
        // li:eq(0) means "look at the first li in the array of li"
        $('#pageSwitcher li:eq(1) a').tab('show');
    };

    $(".tab-content").on("click","#page1 button", showPageTwo);
});

查看这个 jsFiddle 以获得一个工作示例：http://jsfiddle.net/mori57/Xr9eT/

Answer 2

给你的按钮一个 ID：

<div class="tab-content" style="width:100%;">
    <div class="tab-pane active" id="page1">
        <button type="button" id="myButton">Proceed to page 2</button>
    </div>
    <div class="tab-pane" id="page2">
        <p>Page 2 content here!</p>
    </div>
</div>

只需触发对右侧锚点的点击，其余的就由 bootstrap 完成：

$(document).ready(function() {
    $('#myTab a').on('click', function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('#myButton').on('click', function() {
        $('.nav-tabs li:eq(1) a').trigger('click');
    });
});

Answer 3

你不应该为你的按钮使用特定的代码，而应该使用通用的事件驱动过程：
- 你应该为你的按钮添加一个属性来指定它将重定向到哪个页面
- 然后附加一个点击事件
- 将点击事件附加到选项卡以执行相同操作

HTML：

<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>

JS处理tab切换：

function showPage(pageId){
    $('.tab-pane').each(function(){
        $(this).removeClass('active');
        $(this).hide();
    }); 
    $(pageId).show();
    $(pageId).addClass('active');
 }

（不确定是否需要使用显示或隐藏功能，如果您的 CSS 管理这要归功于活动类）

然后为您的按钮：

$('#btn').click(function(){
    var destPage = $(this).attr('gotoPage');
    showPage(destPage);
});

对于标签：

$('#pageSwitcher a').each(function(){
    $(this).click(function(e){
        showPage($(this).attr('href'));
    });
});

如果需要，您可以在启动时加载第一页：

$(document).ready(function(){
    showPage("#page1");    // default: load page 1
});

示例：http://jsfiddle.net/DSbrj/1/

Answer 4

showPageTwo() 应该在 document.ready() 调用之外声明。