Question

我使用了引导标签，我想为标签ID添加点击事件，但是当我点击标签为step2的标签时，它对我不起作用，我无法显示控制台日志（点击）。在我的代码之上，有人可以帮忙吗？

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

Answer 1

我在您的<a>代码中添加了一个ID

请参阅下面的工作示例

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

    });
});

https://jsfiddle.net/fdzxLydg/

Answer 2

您的脚本

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

正在寻找一个带有“step2”类的div，它不存在。你将div的id称为“step2”。将脚本更改为

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

Bootstrap选项卡单击事件

2 个答案: