1

小さなメニューを作成していますが、サブメニュー項目が現在表示されている場合、メニュー項目のクラスを追加または置換するには、jQuery の助けが必要です。

<div id="menu">    
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page.html">Page</a>
            <ul>
                <li><a href="sub-page-1.html">Page 1</a></li>
                <li><a href="sub-page-2.html">Page 2</a></li>
                <li><a href="sub-page-3.html">Page 3</a></li>
            </ul>
          </li>
    </ul>
</div>

基本的に、サブメニュー項目が現在表示されている場合 ( ul li ul li)、その親メニュー項目にクラスを追加する必要があります ( ul li)。

私はこのサイトで同様の質問を見つけましたが、サブメニュー部分が含まれておらず、jQueryについて無知です。

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('ul#menuHov a[href$="' + window.location.pathname + '"]').addClass("menuHov"); 
});

事前にどうもありがとう

4

6 に答える 6

3

これを試して ：

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent('li').addClass("menuHov"); 
});
于 2012-11-15T11:39:13.957 に答える
1

サブメニュー項目を持つ親項目にのみクラスを追加する場合 (ページの読み込み時に 1 回)、次のように簡単に実行できます。

$('ul li ul').parent().addClass('children-viewed');

サブメニュー項目がホバーされているときにクラスを追加する場合は、次のことができます。

$('ul li ul li').hover(function(){
    $(this).parent().parent().addClass('viewed');
},function(){
    $(this).parent().parent().removeClass('viewed');
});

サブメニュー項目が表示されているときにクラスを追加する場合(たとえば、親の項目をホバーするとき) は、次のように実行できます。

$('ul li').hover(function(){
    $(this).addClass('viewed');
    // show sub-menu items
},function(){
    $(this).removeClass('viewed');
    // hide sub-menu items
});

「現在閲覧中」が別の意味である場合は、その意味を説明してください。

PS: 下手な英語で申し訳ありません。

編集：

今分かります ：） 。次に、次のことができます。

$('ul li ul li').each(function(){
    var rx = new RegExp($(this).children('a').attr('href')+"$");
    if(rx.test(window.location.pathname)){
        $(this).parent().parent().addClass("menuHov");
    }
});

または、ループが気に入らない場合:

var curr_url = window.location.pathname;
var currently_viewed = curr_url.substr(curr_url.lastIndexOf("/")+1);
$('ul li ul li a[href$="'+currently_viewed+'"]').parent().parent().parent().addClass("menuHov");
于 2012-11-15T12:15:58.313 に答える
1 
document).ready(function() {
   $('li a').addClass("menuHov");
 var lastVisited =  document.referrer;//it can return last url
   $('li ul li a').find('href='+lastVisited).addClass("className");  
});
于 2012-11-15T11:38:35.330 に答える
1 
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});

#menu ul li ul li a も定義できます

jQuery(document).ready(function() {
   jQuery('#menu ul li ul li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});
于 2012-11-15T13:23:16.810 に答える
0

例があれば$_GET['page']=="food"

このようなものでURLをチェックインします

function getUrlVars() {
   var vars = {};
   var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
   function(m,key,value) {
   vars[key] = value;
   });
   return vars;
}

次に、メニューアイテムにIDを付けることができます

<li id="food">Food</li>

次に、ページを取得する方法。

var page = getUrlVars()["page"];

if (page){
    var currPage = $("#"+page);
    currPage.css({"background":"#eeeeee","color":"#000000"});

}else{
    console.log("No page defined!");
}
于 2012-11-15T13:07:23.290 に答える
0

機能を使用できjQuery .is()ます。そのようなことを試してください

$('ul li ul li').is('.open')

を使用してホバー時に.openクラス識別子を追加しますul li ul liaddClass('.open')

詳細はこちら

于 2012-11-15T11:59:22.987 に答える