選択したリンクをアクティブにする方法

-1

選択したリンクを表示することができますが、ページのどこかをクリックするとハイライトが消えます。私はまた、ホバーのようなエッジにハイライトを得るのに苦労しています。選択したリンクをアクティブにする方法

参考用にコードと写真を添付しました。

#sidebarContent a :ACTIVE, #sidebarContent a:FOCUS{ 
     background-color: Green; 
     padding: 5px 10px; 
     /* margin-left:auto; 
     margin-right:auto; */ 
     text-decoration: none; 
     width: 120px;   
    }

出典

2017-02-24 eldix_

あなたのリンクにクラスを添付する必要があります。：

<a href="#/home" ng-class="{active: isActive('home')}">Home</a> <a href="#/about" ng-class="{active: isActive('about')}">About</a>

'：focus'と'：active'は、（ '：hover'のように）その要素とやり取りしている間だけ持続します。 – gyre

これがjQueryでタグ付けされているのを見て、私はあなたにこれを試してみることをお勧めします：http://stackoverflow.com/questions/7738219/how-to-keep-active-css-style-after-clicking-an-素子。エッジまでのハイライトになると、ぼんやりとしたものが必要かもしれないと思う。 – Coss

パーフェクト。ありがとう！ –

あなたが角度のアプリケーションを使用する場合は

は（あなたはこのタグを追加しました） - あなたが代わりに ::focus疑似クラスを使用してのあなたの現在のルートをマークする activeクラスを使用することができます。

$scope.isActive = function(path) { 
    return $location.path() == '/' + path; 
}

このフィドルを確認してくださいhttps://jsfiddle.net/vadimb/2waujx3m/

出典

2017-02-24 09:14:49 VadimB

彼が実際に 'angle-ui-bootstrap'を使っているなら、これはもっと良い例です。 jsfiddleリンクのBTW +1 –

選択したリンクをアクティブにする方法

答えて

関連する問題