[解決済み】現在のメニュー項目をハイライトする方法は?
2022-04-13 14:29:44
質問
AngularJSは、このように
active
クラスは現在のページのリンクにありますか?
何か魔法のような方法があるのだろうと想像しているのですが、見つからないようです。
私のメニューはこんな感じです。
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>
で、ルートにそれぞれのコントローラを用意しています。
TasksController
と
ActionsController
.
しかし、quot;active" クラスをこのクラスでバインドする方法がわかりません。
a
のリンクは、コントローラへのリンクです。
何かヒントはありますか?
解決方法は?
表示中
<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>
コントローラ上
$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}
これにより、タスクリンクは '/tasks' で始まるすべての url (例: '/tasks/1/reports') でアクティブクラスを持つようになります。
関連
-
[解決済み] X-Frame-Options'を'SAMEORIGIN'に設定しているため、フレーム内での表示を拒否された。
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] ServiceとFactoryで迷う
-
[解決済み] ng-modelとng-bindの違いは何ですか?
-
[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには?
-
[解決済み】AngularJS 。ファクトリーの代わりにサービスを使用する場合
-
[解決済み] angularjsでクリックされた要素にアクセスする
-
[解決済み] AngularJSでアクティブなタブのスタイルを設定する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] 方法 $state.go()
-
[解決済み] ページロード時にAngularJSのコントローラ関数を実行する方法は?
-
angularjsのルーティングについて $stateと$stateParamsの話
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み] AngularJSの.$on()とは?
-
[解決済み] "AngularJSで考える "って、jQueryのバックグラウンドがあれば?[終了しました]
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] Angular JSでブートストラップナンバーアクティブクラスを設定する方法は?