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

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

Answer 3

给您的按钮的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 4

你不应该使用特定的代码为您的按钮，但一般事件驱动的过程：
- 你应该将属性添加到您的按钮以指定朝向页面会重定向
- 再附上一个click事件
- 附加点击事件选项卡，做同样的

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/