2015-07-13 67 views
1

我使用了引導選項卡,我想爲選項卡ID添加單擊事件,但當我單擊帶有步驟2的選項卡時,它不起作用。我無法顯示控制檯日誌(單擊)。我的代碼上面有 ,有人可以幫忙嗎?Bootstrap選項卡單擊事件

日Thnx

<html> 

<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script> 
jQuery(document).ready(function($) { 
$('.step2').on('click', function (event) { 
      event.preventDefault(); 
console.log("click step2"); 

    //other actions 
     }); 

}); 
</script> 
</head> 

<div class="container" id="myContainer"> 

    <div class="navbar"> 
     <div class="navbar-inner"> 
      <ul class="nav nav-pills"> 
      <li class="active"><a href="#step1" data-toggle="tab">Step1</a></li> 
      <li><a href="#step2" data-toggle="tab" >Step2</a></li> 
       <li><a href="#step3" data-toggle="tab">Step3</a></li> 

      </ul> 
     </div> 
    </div> 
    <div class="tab-content"> 


     <div class="tab-pane fade" id="step1"> 
     Step1 
     </div> 



     <div class="tab-pane fade" id="step2"> 

     step2 

     </div> 
     <div class="tab-pane fade" id="step3"> 


     step3 
     </div> 

    </div><!-- end tab content --> 

</div> <!-- end container --> 

</html> 
+0

$(」第二步' )未找到類 –

回答

1

我已經在你的<a>標籤添加一個id

請參見工作示例如下

$(document).ready(function() 
{ 
    $('#button').click(function() { 
      event.preventDefault(); 
      alert("click step2"); 

    }); 
}); 

https://jsfiddle.net/fdzxLydg/

+0

謝謝,我只是忘了加ID :( –

+0

高興它幫助:) – QGA

0

你的腳本

$('.step2').on('click', function (event) 

正在尋找一個div的「step2」類,它不存在。你有div的id爲「step2」。更改你的腳本

$('#step2').on('click', function (event)