為什么此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處理選項卡切換：

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（）調用之外聲明。