0

私はJQueryを初めて使用しますが、JQueryは本当に便利だと感じています。ユーザーがJQueryを使用している現在のページのナビゲーション項目を強調表示しようとしています。似たようなテクニックをいくつか試しましたが、何も正しく機能しません。dropmenu.jsを使用しているため、問題が発生している可能性があります。

.selectedというCSSクラスを作成しました。これは、navアイテムに手動で適用したときに必要な処理を実行します。次に、次のJQueryコードを取得しました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('#nav-one li a').click(function() {
$(this).closest("li").addClass('selected').siblings().removeClass('selected');
return(false);  
});
</script>

そして私のメニューは次のようになります：

<ul id="nav-one" class="dropmenu css-only">
<li><a href="index.html">Home</a></li>
<li><a href="our_cupcakes.html">Our Cupcakes</a>
<ul>
<li><a href="birthday_cupcakes.html">Birthday Cupcakes</a></li>
<li><a href="new_baby_cupcakes.html">New Baby Cupcakes</a></li>
<li><a href="anniversary_cupcakes.html">Anniversary Cupcakes</a></li>
<li><a href="just_because_cupcakes.html">Just Because Cupcakes</a></li>
<li><a href="seasonal_cupcakes.html">Seasonal Cupcakes</a></li>
<li><a href="special_order_cupcakes.html">Special Order Cupcakes</a></li>
</ul>
</li>
<li><a href="flavours_and_colours.html">Flavours &amp; Colours</a></li>
<li><a href="faqs.html">FAQs</a>
<ul>
<li><a href="faqs.html">General questions</a></li>
<li><a href="faqs.html#ingredients">Ingredients</a></li>
<li><a href="faqs.html#delivery">Delivery &amp; Pick-up</a></li>
<li><a href="faqs.html#about">About us</a></li>
</ul>
</li>
</li>
<li><a href="order_cupcakes.php">Order Cupcakes</a> </li>
</ul>

Dropmenu.jsは私のドロップメニューの動作を行い、そのための別のCSSがありますが、これによってJQueryを使用して.selectedクラスをnavアイテムに適用できなくなることはわかりませんが、間違っている可能性があります。

誰かが私がどこで間違っているかもしれないかについて私にいくつかのヒントを与えることができますか？最終的に、コードは私の妻のホームベーキングウェブサイトhttp://カップケーキ.ladybirdbakery.co.ukに置かれます

どうもありがとう。

蟻

4

1 に答える 1

0

編集2：ユーザーが表示されているページのメニューオプションを強調表示しようとしていることに気づきませんでした。これはまったく別のことであり、現在行っていることはiにアプローチする間違った方法です。その理由は、次のとおりです。ユーザーがリンクをクリックすると、クラスselectedがに追加され<li>ます。しかし、その後、まったく新しいページが読み込まれます。JavaScript（およびjQuery）がWebページに加えた変更は、将来のページでは保持されません。つまり、新しいページが読み込まれると、誰かが1つをクリックするまで、どのページにも<li>クラスがありませんselected（ただし、別のページがすぐに読み込まれるため、liハイライトは表示されません）。
これを実装する方法に関しては、クラスselectedを手動で正しいものに追加することをお勧めしますli各HTMLファイルで。しかし、本当にJavaScriptを使用したい場合は、次のコードを使用します。 

$(function(){ // this is a shortcut for $(document).ready(function(){
  var filename = location.pathname.substring(location.pathname.lastIndexOf('/')+1)
  $('a[href="' + (filename ? filename : 'index.html') + '"]').parent('li').addClass('selected')
})

したがって、最初に変数を作成し、filenameそれを現在のページのファイル名に設定します。次に、属性がファイル名と等しいすべて<a>のsを見つけ、それらの親要素を取得して、クラスを追加します。これがお役に立てば幸いです。さらに問題や質問がある場合は、私に知らせてください。ありがとう！href<li>selected

于 2012-08-09T12:44:38.287 に答える