Angular 2でBootstrap navbarの "active "クラスを設定する方法は?
2023-10-05 23:50:20
質問
Angular 2でBootstrapのナビバーquot;active"クラスを設定するにはどうすればよいですか?私は唯一の Angular 1の方法 .
にアクセスすると
について
ページに
class="active"
に
について
を削除し
class="active"
について
ホーム
.
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['About']">About</a></li></li>
</ul>
ありがとうございます。
どのように解決するのですか?
新しい3.0.0のコンポーネントルータを使用する場合( https://github.com/angular/vladivostok ) を使用すると routerLinkActive ディレクティブを使用します。それ以上のjavascriptは必要ありません。
<ul class="nav navbar-nav">
<li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
<li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>
私は "@angular/router": "^3.0.0-alpha.7" を使いました。
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Angularでは、アクティブなルートをどのように決定するのですか?
-
[解決済み】twitter bootstrapのナビバーが上に重なるのを修正したサイト
-
[解決済み】モバイルレイアウトでBootstrap 3の列の順序を変更するにはどうすればいいですか?
-
[解決済み] Angular JSでブートストラップナンバーアクティブクラスを設定する方法は?
-
[解決済み] ASP.NET MVCのHtml.ActionLinkに "active "クラスを追加する方法
-
bootstrapのモーダルを広くしてみる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み] Angular JSでブートストラップナンバーアクティブクラスを設定する方法は?
-
[解決済み】Bootstrapを使用したフォームのマークエラーについて
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Bootstrap 3.0 - 固定カラムサイズを含む流動的なグリッド
-
[解決済み] Bootstrapのcolは右寄せ
-
[解決済み] Bootstrapの中央見出し
-
[解決済み] Twitter Bootstrap 3でレスポンシブ機能を削除する方法とは?
-
[解決済み] Twitter Bootstrap 3 のハーフカラム