0

我的网站上有两个 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顶部菜单时，获得活动的类顶部菜单和页脚菜单。我该怎么做？

4

3 回答 3

2

这是一个演示

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-25T14:23:01.210 回答
0

首先，id's 在整个文档中应该是唯一的，您不应拥有超过 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>

然后使用 jQueryaddClass()和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-25T14:10:00.780 回答
0 
$('#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-25T14:14:54.550 回答