1

いくつかのリンクを持つナビゲーション バーを備えた基本的な Web サイトがあるとします。ページ（たとえば、利用規約）にいるとき、ナビゲーションバーの「利用規約」リンクを強調表示したい。別のページに切り替えると、そのページのリンクが強調表示されるようにします (つまり、プライバシー ページに切り替えると、ナビゲーション バーで [プライバシー] が強調表示されます)。

HTML/CSS/JSでこれを行う簡単な方法を知っている人はいますか?

4

6 に答える 6

4

JavaScript や php などを使用せずにこれを行う簡単な方法は、各ページの body タグに異なるクラスを追加することです。

<body class="nav-1-on">

次に、css ファイルで次のようにします。

body.nav-1-on a.nav-1, body.nav-2-on a.nav-2  { color:red )

だから、あなたが持っているナビゲーションアイテムの数に関係なくXXXクラスが必要であり、図のように各ナビゲーションアイテムにもクラスを配置します。

わかる？

于 2012-07-30T22:11:54.157 に答える
3

更新（ブレインフェード、間違ったセレクターがありました）。CSS3ブラウザーの場合、ページ名自体を簡単にターゲティングできます。

a[href*=pageNameImOn.htm] {color: red;}

ここでは、それらに*=含まれるすべてのhrefパスに一致します。これは、次のように一致します。pageNameImOn.htm

<a href="/my/path/to/file/pageNameImOn.htm">
<a href="/pageNameImOn.htm">
<a href="/pageNameImOn.htm#interalJumpLink">
于 2012-07-30T22:14:59.907 に答える
1

このソリューションはjQueryを使用します。jQueryは実際にはjavascript用にコンパイルされたコードライブラリであり、使いやすいスニペットと機能を提供します。

これは、「クライアント側」であるため、サーバーによって追加されてからユーザーに送信されるのではなく、ユーザーマシンによってクラスが追加されるため、目的を達成するための最も簡単な方法です。ただし、小規模なサイトの場合はそれで十分です。

li何が起こっているのか：このコードはあなたのナビゲーションを見つけます、ここではのを探しています、それで（' '）をあなたのメニュークラスが呼ばれるものに.nav置き換えてください、それでおそらく： 。次に、メニューリンクが現在のページと一致するかどうかを確認し、一致する場合は、liにクラスを追加します。したがって、次のようなクラスも作成する必要があります。.nav li('.mymenu li').active.active{background-color:blue;}

お役に立てれば！

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  jQuery('.nav li').each(function() {
  var href = jQuery(this).find('a').attr('href');
  if (href === window.location.pathname) {
  jQuery(this).addClass('active');
}
});
});  
</script>
于 2012-07-30T22:16:22.050 に答える
1

それの楽しみのためだけに。バックエンドコードやJavascriptを使用しないSingle page、唯一のソリューションについてはどうでしょうか。CSS3

<ul>
     <li><a id="home" href="#home">Home</a></li>
     <li><a id="terms" href="#terms">Terms of use</a></li>
</ul>

CSS

 li a { color: black; }     
 #home:target { color: red; }     
 #terms:target { color: red; }

CSSの:targetセレクターは、現在のハッシュタグと一致するIDセレクターと一致します。詳細については、http： //reference.sitepoint.com/css/pseudoclass-targetをご覧ください。

Firefox、Safari、Opera、Chromeでかなり良いサポート。

IE9およびIE10での不完全なサポート：

IEは[戻る]ボタンと[進む]ボタンに反応しません。要素は疑似クラスを適用または削除しません。http://www.quirksmode.org/css/contents.html

于 2012-07-30T22:18:30.053 に答える
1

ページを識別するために、body に別の ID を設定します。

<body id="terms-of-use">

ナビゲーションの例:

<nav>
 <a class="home" href="#">Home</a>
 <a class="terms-of-use" href="#">Terms</a>
</nav>

次に、CSSで：

nav a {
  // default style
  background: blue;
}

#terms-of-use a.terms-of-use {
 // if the id of body is terms-of-use then the link with the class .terms-of-use...
 background: red;
}
于 2012-07-31T01:39:26.793 に答える
1

別の色にしたいリンクについては、スタイルを手動で設定できます

<a style="color:red">My link is red</a>

おそらくより良い方法は、色が赤のクラスを定義することです

<style> .visited { color:red } </style>

そして実際のリンク

<a class="visited">My red link</a>

于 2012-07-30T22:09:37.053 に答える