如何將類添加到相應的菜單項

我有兩個導航。

<ul id="menu"> 
<li><a href="#">element1</a></li> 
<li><a href="#">element2</a></li> 
<li><a href="#">element3</a></li> 
<li><a href="#">element4</a></li> 
<li><a href="#">element5</a></li> 
</ul> 

<div id="nav"> 
<ul class="other"> 
<li><a href="#">element 1</li> 
<li><a href="#">element 2</li> 
<li><a href="#">element 3</li> 
<li><a href="#">element 4</li> 
<li><a href="#">element 5</li> 
</ul> 
</div>

我想要做的是：

當我點擊#menu元3，那麼我想addClass當前這個元素，並在#nav添加當前類元素3其他導航。

因此，點擊#menu中的元素將會導致添加一個類來點擊#menu和#nav .other的元素，並且在#nav .other li a中點擊會導致添加一個類到相應的#menu li a 。

在此先感謝！

來源

2012-01-25 Fowowski

嘗試：

$('ul li').click(
    function(){ 
     $('.current').removeClass('current'); 
     $(this).addClass('current'); 
     $('#nav ul li').eq($(this).index()).addClass('current'); 
    });

JS Fiddle demo。

參考文獻：

來源

2012-01-25 13:15:26

可以使用的.index（）或可能從要素

$("#menu li a, #nav li a").click(function() { 
    var clickeElement = $(this).index(); 

    $("#menu li:nth-child(clickeElement), #nav li:nth-child(clickElement)").addClass("myClass"); 

});

來源

2012-01-25 13:15:29 jaredrada

感謝隊友，我增進了你的代碼一點點，因爲在第n個孩子需要得到一個整數，不串，所以這裏的最終演示：http://jsfiddle.net/Cynt5/ – Fowowski

製造陣列嗯......老實說，我不明白你爲什麼會需要菜單這樣的功能，但...

$("#menu li").click(function(){ 
    i = $(this).index(); 
    $(".current").removeClass("current"); 
    $(this).addClass("current"); 
    $("#nav li:eq(" + i + ")").addClass("current"); 
});

this outta do it。

來源

2012-01-25 13:18:15

我需要的功能，因爲我有兩個單獨的導航滾動網站 - 上部菜單和頁面右側的小點，所以當我點擊上部菜單的位置，然後我需要標記它，也標記正確的點，反之亦然 – Fowowski

這是一個非常脆弱的方法實際上，這將是難以維持作爲你的HTML變化，這裏是一個不同的方法，你可能要考慮：

HTML：

<ul id="menu"> 
    <li data-menu="item1"><a href="#">element1</a></li> 
    <li data-menu="item2"><a href="#">element2</a></li> 
    <li data-menu="item3"><a href="#">element3</a></li> 
    <li data-menu="item4"><a href="#">element4</a></li> 
    <li data-menu="item5"><a href="#">element5</a></li> 
</ul> 

<div id="nav"> 
    <ul class="other"> 
    <li data-menu="item1"><a href="#">element 1</li> 
    <li data-menu="item2"><a href="#">element 2</li> 
    <li data-menu="item3"><a href="#">element 3</li> 
    <li data-menu="item4"><a href="#">element 4</li> 
    <li data-menu="item5"><a href="#">element 5</li> 
    </ul> 
</div>

的jQuery：

$('#menu li').click(function(){ 
    $('.current').removeClass('current'); 
    $(this).addClass('current'); 
    var menu = $(this).data('menu'); 
    $('#nav li[data-menu="'+menu+'"]').addClass('current'); 
});

來源

2012-01-25 13:24:11

如何將類添加到相應的菜單項

回答

相關問題