戻るボタンをクリックしたときに正常に動作しない jQuery メニューがあります。現在表示しているページのリンクには、html に「selected」というクラスがあります。jQuery はクラスを削除し、他のリンクにカーソルを合わせると「hovering」クラスを追加します。問題は、[戻る] ボタンをクリックすると、実際に表示しているページのリンクではなく、アクセスしたばかりのリンクに「選択済み」のクラスが残ることです。私は初心者ですが、htmlが上書きされていると想定しています。
これまでのところ、FF、IE、および Chrome でのみテストしました。この問題は FF でのみ発生します。HTMLで元のCSSクラスに戻す方法があるかどうか疑問に思っていました。メニューはここでテストできます。
html は次のとおりです。
<div id="menu">
<ul>
<li id="menuitem0" class="selected"><a href="index.html">HOME</a></li>
<li id="menuitem1"><a href="link1.html">Link1</a></li>
<li id="menuitem2"><a href="link2.html">Link2</a></li>
<li id="menuitem3"><a href="link3.html">Link3</a></li>
<li id="menuitem4"><a href="link4.html">Link4</a></li>
<li id="menuitem5"><a href="link5.html">Link5</a></li>
<li id="menuitem6"><a href="link6.html">Link6</a></li>
</ul>
</div><!--menu-->
jQueryコードは次のとおりです。
jQuery(document).ready(function($) {
jQuery(function($){
var pathmatch = location.pathname.match(/([^\/]+)$/);
// set selected by the current pathname, or default to Home...
if( !pathmatch || !$('#menu a[href$="' + pathmatch[1] + '"]').addClass('selected').length){
$('#menu a').eq(0).addClass('selected');
}
$('#menu a')
.hover(function(ev){
// add (or remove) 'hovering' class to the parent LI and its parent UL...
$(this).parent().parent().andSelf().toggleClass('hovering',ev.type==='mouseenter');
})
});
});