57

nav-barウィザードの進行状況インジケーターにブートストラップを使用しています。まだアクセスしていないウィザードのステップがクリックできないことを確認したいと思います。に表示したいのですが、グレー表示にnav-barしてリンクを無効にしてください。

これはブートストラップで実行できますnav-barか？

4

8 に答える 8

80

disabledクラスをコンテナに追加できます<li>：

<ul class="nav nav-list">
   <li class="disabled"><a href="index.html">...</a></li>
</ul>

ただし、ユーザーがクリックすることを禁止するには、JavaScriptを使用してこれを防ぐ必要があります。

$(document).ready(function() {
   $(".nav li.disabled a").click(function() {
     return false;
   });
});

もう1つの方法は、プロパティを一時的hrefにアンカー（ ）に置き換えることです。#

于 2013-03-26T23:36:50.493 に答える
27

これを行う正しい方法は、属性<a>なしでnchorタグを使用することhrefです。

これはほとんど知られていない手法ですが、完全に有効なHTMLであり、<a>タグに起因するすべてのスタイルを持つ要素につながりますが、リンク機能はありません。

<ul class="nav nav-list">
   <li><a>...</a></li>
</ul>

技術的な背景については、 W3CのHTML仕様を参照してください。

要素にhref属性がない場合、その要素は、リンクが関連していた場合にリンクが配置された可能性のある場所のプレースホルダーを表し、要素のコンテンツのみで構成されます。

于 2014-12-05T17:27:04.773 に答える
4

これは、CSSで（つまり<11をサポートする必要がない限り）pointer-eventsプロパティを使用して完全に実行できます。ただし、ポインタイベントをオフにするaと、許可されていないカーソルも取得できなくなったため、無効に設定しましたli。（私はこの質問がかなり古いことを知っていますが、それでも最初の検索結果です）

これはその目的のための私のSCSSです：

ul.nav {
    li.disabled {
        cursor: not-allowed;

        a {
            pointer-events: none;
        }
    }
}
于 2017-09-18T12:08:34.697 に答える
3

無効を追加するだけではナビゲーションが妨げられないことを付け加えたいと思います。さらに、answers jqueryソリューションは機能しますが、無効にされたクラスを追加または削除しても、ハンドラーのバインドは解除されません。

これは、jqueryの.onメソッドを使用するようにイベントハンドラーを変更することで解決できます。

$('body').on('click', '.disabled', function(e) {
    e.preventDefault();
    return false;
});

これにより、ハンドラーがbodyにアタッチされ（bodyは必ずコンテナーに置き換えられます）、無効にフィルターされます。本文がクリックされたときはいつでも、クリックされたものが無効になっていると、クリックが防止されます。

詳細については、 http：//api.jquery.com/on/を確認してください。

于 2015-02-04T20:31:13.360 に答える
2

最も簡単な方法は、クラスをからに変更するnav-linkことnav-link disabledです。

このような：

<a class="nav-link disabled" href="#">
于 2021-03-30T23:00:48.653 に答える
1

navリンクを無効にするには、liとタグの両方を無効にする必要があります。しかし、かみそりの構文を使用する場合、これは少し注意が必要な場合があります。無効にされたクラスをliに追加することは正常に機能しますが、タグに対するアクションを無効にすることはありません。したがって、gustavohenkeソリューションに似ていますが、少し洗練されたもので、ドキュメント準備機能でこれを試してください。

$(".nav li.disabled a").prop("disabled",true)

于 2017-05-01T13:28:42.800 に答える
0

hrefであなたの価値を維持するため。onclick="returnfalse;"を使用できます アンカータグを切り替えます。ブートストラップが無効になっているcssクラスを使用して、メニュー項目をグレー表示します。

var enableMyLink = false;

if (enableMyLink) {
  $("li").removeClass("disabled").find("a").removeAttr("onclick");
} else {
  $("li").addClass("disabled").find("a").attr("onclick", "return false;");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li>
  <a href="http://sample.com/">My Link</a>
</li>

于 2015-12-07T01:23:23.650 に答える
-1

まず、ulにIDを追加する必要があります。

<ul class="nav navbar-nav navbar-right" id="someId">
            <li><a>Element</a></li>
</ul>

ulたとえば、を非表示にすることができます。

$(document).find('ul#someId').hide();

必要に応じて、ulを表示できます。

$(document).find('ul#someId').show();
于 2015-12-11T19:18:44.400 に答える