2013-02-22 102 views
0

我試圖添加一個活動的類到子菜單(subnav)項目,當主導航中的項目 被點擊。當主菜單項被點擊時,目標是突出顯示子菜單項目 。子菜單項是鏈接到一個網頁的部分:jQuery添加活動類鏈接在主菜單上點擊子菜單

<div id="subnav"> 
    <ul> 
    <li><a href="#adaptivetech">Adaptive Technology</a></li> 
    <li><a href="#iepspecialed">IEP and Special Ed Forms</a></li> 
    <li><a href="#behaviorplanning">Behavior Planning Forms</a></li> 
    <li><a href="#npsnpainfo">NPS/NPA Information and Forms</a></li> 
    <li><a href="#privateschoolref">Private School Referral for Assessment</a></li> 
    <li><a href="#programtransfer">Program Transfer</a></li> 
    </ul> 
</div> 

這裏是主菜單的樣子:

<ul class="sf-menu"> 
    <li><a href="newselpasite3.html">Home</a></li> 
    <li><a href="#">Meetings/Workshops</a> 
    <ul> 
    <li><a href="#">Selpa Workshops</a></li> 
     <li><a href="#">Selpa Committee Meeting for 2012-2013</a></li> 
     <li><a href="#">Archived Agendas and Minutes</a></li> 
       </ul></li> 
    <li><a href="#" class="top_parent">Services</a> 
    <ul> 
    <li><a href="#">Adaptive Technology Center</a></li> 
     <li><a href="#">Alternative Dispute Resolution</a></li> 
     <li><a href="#">Autism Support</a></li> 
      <li><a href="#">BEST Schoolwide Positive Behavior Support</a></li> 
      <li><a href="#">Community Advisory Committee</a></li> 
       <li><a href="#">Early Start Infant Program</a></li> 
       </ul> 
    </li> 
    <li><a href="#" class="active">Forms</a> 
    <ul> 
     <li><a href="#adaptivetech">Adaptive Technology</a></li> 
     <li><a href="#iepspecialed">All IEP and Special Education Forms</a></li> 
     <li><a href="#behaviorplanning">Behavior Planning Forms</a></li> 
     <li><a href="#npsnpainfo">NPS/NPA Information and Forms</a></li> 
     <li><a href="#privateschoolref">Private School Referral for Assessment</a></li> 
     <li><a href="#programtransfer">Program Transfer</a></li> 
    </ul></li> 

感謝。

+0

你有什麼困難呢?無法定期'點擊'事件處理解決這個問題? – 2013-02-22 17:32:18

+0

看起來像你的標記是缺少結束主菜單ul標記 – 2013-02-22 17:32:36

+0

對不起,我截斷了列表,並意外刪除了結束ul標記 – 2013-02-22 17:39:28

回答

0

可能是這樣的:fiddle

$('ul li ul').find('li a').click(function(){ 
    var $this = $(this); 
    $('a').removeClass('active'); 
    $this.addClass('active'); 
}); 
+0

這似乎突出顯示了主菜單中的列表項,而不是subnav菜單中的相應項目。 – 2013-02-22 17:42:26

+0

剛更新了答案。 – Jai 2013-02-22 17:52:29

+0

似乎要回顧的是,我需要一種方法來選擇subnav菜單中的href元素,它與頂層菜單中單擊的href元素相匹配 – 2013-02-22 18:14:32

0

嘗試以下。

$('li').each(function(){ 
    if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1) 
    { 
    $(this).addClass('active').siblings().removeClass('active'); 
    } 
}); 
相關問題