javascript - 连接激活的两个 HTML 菜单

Question

我的网站上有两个 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 风格和工作方式。我想要，将此菜单连接到事件状态。

例如当我单击顶部菜单上的 menu1 时，将获得事件类顶部菜单和页脚菜单。我该怎么做？

Answer 1

这是一个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');
});