bootstrap pager onclick事件

时间:2017-04-21 12:05:38

标签: javascript twitter-bootstrap pager

我对bootstrap很新,并且对于寻呼机选项来说是全新的。我有一个页面,可以在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>

和点击任一按钮时我想运行的javavscript是: -

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

2 个答案:

答案 0 :(得分:2)

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

将您的js更改为 -

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

答案 1 :(得分:1)

试试这个;

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