为什么此JavaScript函数不起作用？

Question

I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.

Here's my code:

HTML navigation tabs:

    <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 tab content:

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

Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine , I just can't seem to make a button at the bottom of page 1 that activates page 2.

Answer 1

One: bad form, inline onclick call... you don't need it, get rid of it:

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

Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of 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);
});

See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/

Answer 2

Give your button an 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>

and just trigger a click on the right anchor, bootstrap does the rest :

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

You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same

HTML:

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

JS to process tab switching:

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

(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)

Then for your button:

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

For tabs:

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

And you can load page one at startup, if needed:

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

Example: http://jsfiddle.net/DSbrj/1/

Answer 4

showPageTwo（）应该在document.ready（）调用之外声明。