连接活动的两个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菜单

回答

相关问题