web-dev-qa-db-ja.com

Bootstrap Paginationの無効なリンク

ブートストラップのページネーションスタイルを使用しようとしています。ドキュメントは、次のようにページリストを作成するように言っています：

<div class="pagination">
    <ul>
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

最初の2つのリンク、左矢印と1は無効にする必要があります。 Djangoテンプレートに組み込んでも、これら2つは引き続き使用できます。これらをクリックすると、IDが「＃」のその他のアンカーリンクと同じように、ユーザーがページの上部に移動します。 Bootstrapが正しくスタイルするためには、まだそこにある必要があると思います。

ユーザーが無効にされた「ボタン」の1つをクリックしたときに何もしないようにこれを書く方法はありますか？

htmltwitter-bootstrapanchor
17
Ed.

ドキュメントでは、これらのボタンは手動で無効になっています。 .paginationスタイルとは関係ありません。

あなたはそれを使うことができます

$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
    e.preventDefault();
});

注：Ajaxベースのページネーションを使用する場合は、このコードを更新ハンドラーに配置するか、代わりに delegated events を使用する必要があります

30
Sherbrow

（Djangoなどを使用して）HTMLを動的にサーバー側で記述し、JavaScriptを使用したくない場合は、次のようにします。

pseudo code:
if (Model.HasNext()) {
   <li> // normal link
      <a href="www.someurl.com/page=i">next</a>
   </li>
} else {
   <li class="disabled"> // disabled link
      <a href="javascript: void(0)">next</a>
  </li>
}
6
Elger Mensonides

参考として、ここに what Bootstrapが行う ：

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}
6
Dorian
$('.disabled a').click(function(){
    return false;
});
3
Oleg Polutsiganov