私のウェブサイトのトップナビゲーションメニューバーには3つのメニュー項目があります。私は、ユーザーがURLを見ずに、どのページにいるのかを簡単に知りたいと思っていました。つまり、選択されると、各メニュー項目にボトムボーダーカラーを表示することを意味します。別のメニュー項目にリダイレクトしている場合は、下限の色が新しいメニュー項目に変更されます。選択時に下罫線の色を変更するためのアンカータグ
どうすればこの問題を解決できますか？
a {
transition: all .3s; }
a:active,
a:hover,
a:visited {
outline: 0;
text-decoration: none; }
.main.sub-nav dd a:hover:after, .main.sub-nav dd a.active:after{
bottom: -9px;
background: #00ff00;
display: block;
}
おかげ
てみマッチングwindow.location.pathname
document.addEventListener("DOMContentLoaded", function(event) {
if (window.location.pathname == '/page1.html') {
var menuItem1 = document.querySelector('#menu-item-1');
menuItem1.style.borderBottom = '1px solid red';
}
if (window.location.pathname == '/page2.html') {
// and so on
}
});
こんにちはTom、JavaScriptを使用せずに同じ機能を利用できますか？ CSSと同じように？ –
まあ、CSSのURLにアクセスすることはできませんが、静的なhtmlファイルを使って作業している場合は、page1.htmlで、最初のメニュー項目に 'active'などのようなクラスを付け、CSSに対応するスタイルを追加してください： '.active {border-bottom：1px solid red}' –
あなたはonclickの機能でこのような何かを行うことができます。
var tabs = document.getElementsByClassName('navTab'); //Get every nav element
Array.prototype.forEach.call(tabs,function(tab){
tab.style.borderBottom = "2px solid #000000"; // Set every element's border back to normal
});
document.getElementById("tab" + tabNumber).style.borderBottom = "2px solid red"; //Set the selected border to a different color
これはうまくいっていますが、これをアンカータグに実装できるかどうかわかりません。 –
divタグにアンカータグをラップすることはいつでも可能です。 – h01001000
はあなたの研究を共有するすべての人を助けます。あなたが試したこと、なぜ があなたのニーズを満たしていなかったのかを教えてください。これは、あなたが時間をかけて自分自身を助けようと試みたことを示しています。答えが明白であることを忘れないでください。 そしてもっと重要なことは、 もご覧ください：あなたの質問に[ask]と[mcve]を含めてください。 – j08691
jsがロードされているURLをチェックし、ボタンに 'アクティブ 'を追加し、他の人から'アクティブ'を削除してください。 –
あなたはサーバーサイドの言語を持っていて、ページがあるときに現在のクラスを追加する必要があります各ページにフラットなHTMLページを使用している場合は、そのクラスを手動で追加するか、jsを使用してURLをリンクにマップしてクラスを追加します。どのように見ても、現在のページを取得してリンクにマップし、そのマッピングに応じてクラスを追加する方法を理解する必要があります。それらの行に沿って何か試してみたら、つまってしまったら、もっと具体的なエラーで戻ってください。 – Pete