這個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/