Question

我有2个UL，其中一个是我的链接，另一个是图像。

我希望能够从一个列表中单击LI，然后从另一个列表中显示其链接的li。我希望我已经解释得很好。

我试图给uls做索引以便提出一个解决方案，但到目前为止还没有运气。请参阅下面的我的尝试。真的很感激任何帮助。我对jQuery很新。

<ul class="options">
    <li class="active">Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

<ul class="destination">
    <li class="active">Destination 1</li>
    <li>Destination 2</li>
    <li>Destination 3</li>
</ul>

    $(function(){

    $(".options li").each(function(index) {
        $(this).addClass('option' + index);
    });

    $(".destination li").each(function(index) {
        $(this).addClass('destination' + index);
    }); 

    $(".options li").click(function(e){
        $(".options li").removeClass('active');   
        $(this).addClass('active');    
    });

});

Answer 1

试试这个：

$(".options li").each(
    function(index) {
        $(this).click(function() {
            $(".active").removeClass('active');
            $(this).addClass('active');
            $(".destination li").eq(index).addClass('active');
        })   
    }
);

您可以使用index的{{1}}参数来确定索引，并将其保存在匿名.each()函数中。

JSFIDDLE

Answer 2

$(function(){
    $(".options li").click(function(e){ 
        $(this).addClass('active').siblings().removeClass('active');
        $('.destination li:eq(' + $(this).index() + ')').addClass('active').siblings().removeClass('active');
    });
});

Fiddle

Answer 3

我认为这是最简单的方法：

    $(".options li").click(function(e){
        $(".options li").removeClass('active');        
        $(this).addClass('active'); 
        $(".destination li").removeClass('active');
        $('.destination li').eq($(this).index()).addClass('active');
    });

Fiddle

两个UL链接，单击LI并在两个UL中添加活动到LI

3 个答案: