2017-04-21 19 views
0

私はブートストラップには全く新しく、ページャオプションにはまったく新しいものがあります。私は、javascriptのクリックイベントでブートストラップボタンで動作するページを持っています。私はこれをページャオプションで実装しようとしています。以下は、オプションの1つの簡単な例と、私がjavascriptにしたいものです。私はそれが何かをするように思えないし、私はそれにボタンクラスを追加する場合、揃えは完全に鍋に行く!ブートストラップページャonclickイベント

<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は次のとおりです:おかげ

は、HTMLは -

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

答えて

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

sorted cheers mate – Jules

2

あなたはANにクリックハンドラを追加していますidがnextの要素ですが、htmlではnextがクラス名です。

がにあなたのjsを変更

-

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