在活動狀態下連接兩個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風格和工作。 我想要，在活動時連接這個菜單。

EG當我單擊頂部菜單上的menu1 ，獲取活動類topmenu和footer-menu。 我該怎么做？

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

Answer 2

首先， 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');
    });
});

Answer 3

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