特定のページのアクティブな境界CSS/HTML

Question

そのページにいるときにアクティブな境界線ボタンを作成中です。しかし、2番目の境界ボタンを押すと、最初の境界線が削除され、2番目の境界線が表示されます。基本的にはこのサイトのものと同じです。 「質問、ジョブ、ドキュメントベータ、タグ」ボタン。あなたがそのページにいるときに1つ点灯し、もう1つがオフになる。私はGoogleでそれを探してみましたが、見つけることができませんでした。そして私は、Google Chromeを使って "要素を調べる"ことでコードを調べようとしました。

Answer 1

CSSとHTMLが少し必要です。ページを変更せずにresult要素を「アクティブ化可能」にしたい場合は、JSも必要です。

$('button').on('click', function() { 
 
    $('button').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

button.active { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="active">Active Page</button> 
 
<button>Not Active Page</button>

Answer 2

私はオフだと思う可能性が最も簡単な方法は、あなたがそのページに点灯したいボタンに「能動的」クラスを追加することです。

Answer 3

各ページのHTMLが完全に同じであることを確認してください。次に、各ページで、そのボタンにのみ「アクティブ」クラスを割り当てることによって、対応するボタンのスタイルを変更します。たとえば：についてのページでホーム・ページ

<a class="button active" href="index.html">Home</a> 
<a class="button" href="about.html">About</a> 

で

<a class="button" href="index.html">Home</a> 
<a class="button active" href="about.html">About</a> 

CSS

.button { 
background-color: grey; 
} 

.active { 
background-color: orange; 
}