Javascript 连接激活状态下的两个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

例如，当我单击顶部菜单上的
menu1
时，获取活动类顶部菜单和页脚菜单。如何操作？
首先，
id
在整个文档中应该是唯一的，您不应该有超过1个具有相同id的对象。因此，将html更改为使用
类
：

<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>

这是一个

HTML
（将同一类别应用于两个菜单的
ul
）

首先，不能有两个具有相同ID的元素，但是，此结构使用的脚本如下。@SlayTernaAreonna使用类而不是ID。谢谢，是的，它正在工作。同时获取活动类，但不要转到URL。删除
e.preventDefault（）以使链接正常运行。我添加了这一点，以便演示变得简单。
$(document).ready(function(){
    $('.menu-item').click(function(){
        $('.menu-item').removeClass('active'); // This will remove active class from other links
        $(this).addClass('active');
    });
});

$('#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');
});

<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>

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