Navbar - カラーアクティブリンクに下線を付ける方法や変更する方法は？

Question

私はnavbarを持っています。私はアクティブなメニューに下線を引っ張りたいそれはどうですか？

.nav a:active { 
 
    text-decoration: underline; 
 
} 
 
.nav a:active { 
 
    background-color: red!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="navbar-header"> 
 
    <a class="navbar-brand" href="/">info</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="/main">Main site</a> 
 
    </li> 
 
    <li><a href="/login">/login</a> 
 
    </li> 
 
    <li><a href="/first">/first</a> 
 
    </li> 
 
    <li><a href="/second">/second</a> 
 
    </li> 
 
    <li><a href="/third">Sport</a> 
 
    </li> 
 
    <li><a href="/fourth">fourth</a> 
 
    </li> 
 
    </ul> 
 
</nav>

しかし、それは動作しません。私は同様のトピックを検索しますが、私はそれに対して良い解決策を見つけませんでした。

Answer 1

あなたが望むものを得るためには、phpで作業する必要があります。

最初のすべてのページに名前を付ける：

<?php $page='home'; ?> 

、あなたのナビゲーションに移動し、最後の名前、アクティブとスタイルでウルCSSのクラスを作るあなたのナビゲーションに

<li><a <?php if($page == 'Home') {echo 'class="active"';} ?> href="index.php">Home</a></li> 

を以下を追加しますそれ

.active{ 
text-decoration: underline; 
} 

これはトリックを行う必要があります

Answer 2

あなたのコードはすでにアクティブな色を変更すると思います。しかし、私はあなたがブートストラップの能動的な要素を考えていると信じています。

CSS ：アクティブセレクタは、クリックすると要素の機能を変更する場合に使用します（クリックしたときの効果を確認できます）。ブートストラップで追加することにより、

class="active" 

要素のスタイルは、どのページに依存するかによって異なります。 CSSをどのように変更したかを見てください。これにより、現在表示されているページのアクティブな要素の背景が変更されます。

.nav a:active { 
 
    text-decoration: underline; 
 
} 
 

 
.nav a:active { 
 
    background-color: red !important; 
 
} 
 

 

 
/* Notice how we added an id? This let's us 
 
    be more specific and override the bootstrap selector 
 
*/ 
 
.navbar > #my-nav > .active > a { 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="navbar-header"> 
 
    <a class="navbar-brand" href="#">info</a> 
 
    </div> 
 
    <ul id="my-nav" class="nav navbar-nav"> 
 
    <li class="active"> <a href="#">Main site</a> </li> 
 
    <li> <a href="#">login</a> </li> 
 
    <li> <a href="#">first</a> </li> 
 
    <li> <a href="#">second</a> </li> 
 
    <li> <a href="#">Sport</a> </li> 
 
    <li> <a href="#">fourth</a> </li> 
 
    </ul> 
 
</nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

サイドノート：あなたがに行くために別のページを使用してサイトのアップを持ってまで、背景が変更されません。たとえば、あなたが別のページから、それをクリックした時はいつでも

<li class="active"> <a href="home.html">Main site</a> </li> 

はその後、それが赤に背景を変更します、変化するであろう。