引导寻呼机 onclick 事件答案

【问题标题】：bootstrap pager onclick event引导寻呼机 onclick 事件
【发布时间】：2017-04-21 12:05:37
【问题描述】：

我对引导程序非常陌生，对寻呼机选项也完全陌生。我有一个页面可以使用带有 javascript 中点击事件的引导按钮。我正在尝试使用寻呼机选项来实现这一点。下面只是其中一个选项的快速示例，以及我希望 javascript 执行的操作。我似乎无法让它做任何事情，如果我向它添加按钮类，则对齐完全进入锅！谢谢

html 是：

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">   
<ul class="pager">
  <li class="previous"><a href="#">Back</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>
</div>

当点击任何一个按钮时我想运行的 javascript 是：-

$(document).ready(function() {
   $('#next').on('click', function() {
      $('#box1').hide(); 
      $('#box2').show();
   })
});

【问题讨论】：

标签： javascript twitter-bootstrap pager

【解决方案1】：

您正在将点击处理程序添加到 id 为 next 的元素，但在您的 html 中，next 是一个类名。

把你的 js 改成 -

$(document).ready(function() {
   $('.next').on('click', function() {
      $('#box1').hide(); 
      $('#box2').show();
   })
});

【讨论】：

【解决方案2】：

这样试试；

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-
    xs-offset-1">   
    <ul class="pager">
    <li id="previous" class="previous"><a href="#">Back</a></li>
    <li id="next" class="next"><a href="#">Next</a></li>
    </ul>
</div>




 $(document).ready(function() {
    $('#previous').on('click', function() {
        $('#box2').hide(); 
        $('#box1').show();
    });

    $('#next').on('click', function() {
        $('#box1').hide(); 
        $('#box2').show();
    }); });

【讨论】：