javascript - この 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

1: 悪いフォーム、インラインの onclick 呼び出し...必要ないので、削除してください:

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

2: 2 つの 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>

右のアンカーのクリックをトリガーするだけで、残りはブートストラップが行います:

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

showPageTwo() は、document.ready() 呼び出しの外で宣言する必要があります。