bootstrap 寻呼机 onclick 事件

Question

我对 bootstrap 很陌生，对寻呼机选项也很陌生。我有一个页面可以使用 bootstrap 按钮，在 javascript 中有点击事件。我正在尝试使用寻呼机选项来实现这一点。下面只是一个选项的简单示例，以及我希望 javascript 执行的操作。我似乎无法让它做任何事情，如果我向它添加按钮 class，对齐就会完全消失！谢谢

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>

当单击任一按钮时，我想运行的 javavscript 是：-

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

Answer 1

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

将您的 js 更改为 -

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

Answer 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();
    }); });

bootstrap 寻呼机 onclick 事件

bootstrap pager onclick event

javascript

pager

twitter-bootstrap