私はちょっと立ち往生しています。私は下の図のほとんどすべてを作りました。私が固執しているのは、ユーザーがリンクの1つをクリックすると、下の行が次のページが読み込まれた後に赤色になるように、どのように設定するかを調べようとしています。明らかに、私はページを検出してからインラインCSSを追加するためにJqueryを使用する必要がありますが、苦労しているのは、これを他の人にこのテンプレートを与えることができるようにできるだけ簡単にして、必要。私は何とかli要素を使用してこれを行うことができるかどうかを判断しようとしていましたが、まだ方法が見つかりませんでした。誰か私を助けるためのアイデアはありますか？このナビゲーションはCSSで完全に行うことができます
は、このようなあなたのメニューを作成し、HTML中：bodyタグは、ページ固有であることを
<body id='Search' >
<div id='menu'>
<div class='bars'></div>
<a href='/home/' title='Home'>Home</a>
<a href='/community/' title='Community'>Community</a>
<a href='/search/' title='Search'>Search</a>
<a href='/contact/' title='Contact'>Contact</a>
<div class='bars shift'></div>
</div>
</body>
注
CSSのトリックの上で利用可能なこの技術についての素晴らしい書き込みアップがありますid（Codyが示唆するように）。また、このIDはメニューリンクのtitle属性の値と同じでなければならないことにも注意してください。
そして、このCSSを使用します。
.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;}
.shift {margin-top:-6px;}
#menu {font-family:arial;font-size:12pt;text-align:center;}
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;}
.active {border-bottom:5px solid red;}
最後に、各ページに、このjQueryのを追加します。
$(document).ready(function(){
var id = $('body').attr('id');
$('#menu a').each(function() {
var title = $(this).attr('title');
$(this).removeClass('active');
if (title == id) $(this).addClass('active');
});
});
あなたが住んでフィドルのデモhereを見ることができます。 （テストするには、body要素のidを変更し、runを押してください。）
EDIT：この方法の利点は、Cody Graysの方法と比較して、メニュー項目を追加、削除、編集するときにHTMLを変更するたびにCSSを変更する必要がないことです。一方、jQueryを使用します。ただし、純粋なCSSソリューションが必要な場合は、jQueryとbody要素のIDを削除し、特定のページに応じて特定のリンクに.activeクラスを直接適用します（jackJoeの提案に似ています）。
<li>要素を使用する必要がある場合は、これを簡単に変更できます。
それはかなり簡単です。 "アクティブ" 状態とスタイルのためのクラスを作成し、それ：
<li class="active">Home</li>
とスタイル、それは（HTMLの構造に依存するが、あなたのアイデアを得る）
CSS：
.active {
border-bottom: 3px red solid;
}
ページの読み込み時にクラスを配置するだけです（サーバー側など）
できます。the way jackJoe suggestsを開き、現在選択されているページ上でサーバ側のactiveクラスを設定しますが、純粋なCSSと若干の事前計画でこれを行うこともできます。
これは、ページの<body>タグに最初にid属性を設定することを意味します。これは、とにかく入る良い方法です。次に、あなたのCSSファイルはその本体idを利用して、どれが<li>が「アクティブ」として表示されるべきかを決定します。
サンプル・ページのコード：
<body id="main"> <!-- change this id for each page -->
<ul>
<li class="main-nav"><a href="#">Main</a></li>
<li class="community-nav"><a href="/community">Community</a></li>
<li class="search-nav"><a href="/search">Search</a></li>
</ul>
</body>
サンプルCSS：
li.main-nav,
li.community-nav,
li.search-nav
{
background: #FFF;
/* your other awesome styles */
}
#main li.main-nav,
#community li.community-nav,
#search li.search-nav
{
/* style the active tab differently */
background: #F00;
}
この方法では、ナビゲーション・セクションのHTMLコードは、すべてのページに完全に静的な滞在することができます。サーバー側でレンダリングする必要はなく、クライアント側で動的に変更する必要もありません。 ID Your Body For Greater CSS Control and Specificity
事前に本体IDを静的に、またはサーバー側プログラミングで動的に導入できるように、事前またはサーバー側でアクティブなクラスを適用することもできます。 – Stefan