0

私のサイトには 2 つの 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

ここにデモがあります

HTMLul (両方のメニューに 同じクラスを適用)

<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 
$('#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 に答える
0

まず、idはドキュメント全体で一意である必要があり、同じ ID を持つオブジェクトが複数存在してはなりません。classesしたがって、代わりに使用するように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>

次に、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 に答える