連接活動的兩個HTML菜單

我在我的網站上有兩個HTML菜單。首先，頂級菜單。其次，頁腳菜單。連接活動的兩個HTML菜單

頂部菜單：

<ul id=creamenu> 
    <li><a id="menu1" href="site1.com">1</a></li> 
    <li><a id="menu2" href="site2.com">2</a></li> 
    <li><a id="menu3" href="site3.com">3</a></li> 
    <li><a id="menu4" href="site4.com">4</a></li> 
    <li><a id="menu5" href="site5.com">5</a></li> 
</ul>

頁腳菜單：

<div id="footer-menu"> 
    <ul> 
     <li><a id="menu1" href="site1.com">1</a></li> 
     <li><a id="menu2" href="site2.com">2</a></li> 
     <li><a id="menu3" href="site3.com">3</a></li> 
     <li><a id="menu4" href="site4.com">4</a></li> 
     <li><a id="menu5" href="site5.com">5</a></li> 
    </ul> 
</div>

此菜單有不同的風格active和工作。我想，連接這個菜單激活。

E.G.當我點擊頂部菜單上的menu1時，可以獲得有效的課程頂級菜單和頁腳菜單。我該怎麼做？

來源

2012-12-25 Slaythern Aareonna

首先，你不能有相同的ID – thescientist

然而兩個元素，像這樣使用腳本這種結構。 –

@SlaythernAareonna使用類而不是ID。 – SeinopSys

這裏是一個DEMO

HTML （將相同的類應用於ul這兩個菜單）

<ul id="creamenu" class="menuHolder"> 
    <li><a href="1.com">1</a></li> 
    <li><a href="2.com">2</a></li> 
    <li><a href="3.com">3</a></li> 
    <li><a href="4.com">4</a></li> 
    <li><a href="5.com">5</a></li> 
</ul> 

<div id="footer-menu"> 
    <ul class="menuHolder"> 
    <li><a href="1.com">1</a></li> 
    <li><a href="2.com">2</a></li> 
    <li><a href="3.com">3</a></li> 
    <li><a href="4.com">4</a></li> 
    <li><a href="5.com">5</a></li> 
    </ul> 
</div>

的JavaScript：

$('.menuHolder li a').click(function (e) { 
    e.preventDefault(); 
    $('.menuHolder li a').removeClass('active'); 
    var link = $(this).attr('href'); 
    $('a[href="' + link + '"]').addClass('active'); 
});

來源

2012-12-25 14:23:01

謝謝，是的，它的工作。同時獲得活動課程，但不要轉到URL。 –

刪除'e.preventDefault（）;'使鏈接正常運行。我補充說，這樣演示就變得簡單了。 –

太棒了！非常非常感謝你！ –

首先，id應該是唯一的，通過文檔你不應該有超過1對象具有相同的ID。因此，改變你的HTML中使用classes代替：

<div id="top-menu"> 
    <ul> 
     <li><a class="menu-item" href="site1.com">1</a></li> 
     <li><a class="menu-item" href="site2.com">2</a></li> 
     <li><a class="menu-item" href="site3.com">3</a></li> 
     <li><a class="menu-item" href="site4.com">4</a></li> 
     <li><a class="menu-item" href="site5.com">5</a></li> 
    </ul> 
</div> 

<div id="footer-menu"> 
    <ul> 
     <li><a class="menu-item" href="site1.com">1</a></li> 
     <li><a class="menu-item" href="site2.com">2</a></li> 
     <li><a class="menu-item" href="site3.com">3</a></li> 
     <li><a class="menu-item" href="site4.com">4</a></li> 
     <li><a class="menu-item" href="site5.com">5</a></li> 
    </ul> 
</div>

然後使用jQuery addClass()和removeClass()方法，你可以添加或刪除類，如下所示：

$(document).ready(function(){ 
    $('.menu-item').click(function(){ 
     $('.menu-item').removeClass('active'); // This will remove active class from other links 
     $(this).addClass('active'); 
    }); 
});

來源

2012-12-25 14:10:00 Amyth

對不起，但不工作... –

$('#creamenu a').bind('click', function (e) { 
    e.preventDefault() 
    var pos = $(this).parent().index(); 
    $("#creamenu li").removeClass('active'); 
    $(this).addClass('active'); 
    $("#footer-menu li").removeClass('active1'); 
    $("#footer-menu li").eq(pos).addClass('active1'); 
});

來源

2012-12-25 14:14:54 user1276919

連接活動的兩個HTML菜單

回答

相關問題