Question

我有两个不同的链接显示隐藏的div。当单击任一链接以显示隐藏的div时，我想显示两个链接的活动状态。

这是我的第一次jquery尝试，我想我需要有两个不同的链接类。基本上我只是不确定从哪里开始。

我使用图片作为链接，但为了简单起见，我使用文字来展示我到目前为止的内容：http://jsfiddle.net/hra00L0k/4/

提前感谢您的帮助。

HTML

<div id="1" class="number">
    <a class="link" href="#" rel="div1">Link 1</a>
    <a class="link" href="#" rel="div2">Link 2</a>
</div>

<br />

<div id="2" class="letter">
    <a class="link" href="#" rel="div1">Link A</a>
    <a class="link" href="#" rel="div2">Link B</a>
</div>

<div class="content" id="div1">
    <p>Link 1 and Link A open this box. I want both links to display their active css.</p>
    <a href="#" class="close">Close</a>
</div>
<div class="content" id="div2">
    <p>Link 2 and Link B open this box. I want both links to display their active css.</p>
    <a href="#" class="close">Close</a>
</div>

CSS

.number a{
color: #000000; 
}

.number a.active, 
.number a:hover {
    color: #FF0004;
    font-weight: bold;
}

.letter a{
    color: #000000; 
}

.letter a.active, 
.letter a:hover {
    color: #00BC10;
    font-weight: bold;
}

.content {
    display: none;
}

JQUERY

$(document).ready(function () {
    $('.link').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('rel');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('.content').hide();
        $('#' + content).show();
    });
    $("a.trigger").click(function () {
        $(this).next(".content").slideToggle("slow");
    });
    $("a.close").click(function () {
        $(".content").hide("fast");
        $('.active').removeClass('active');
    });
});

Answer 1

确定有很多方法可以做到这一点。我选择了最简单的，但这里的脚本有：

$(document).ready(function () {
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
    // Stop the link being followed:
    e.preventDefault();
    // Get the div to be shown:
    var content = $(this).attr('rel');
    // Remove any active classes:
    $('.active').removeClass('active');
    // Add the 'active' class to this link:
    // replace this line //$(this).addClass('active');
    $('[rel="' + content + '"]').addClass('active');
    // Hide all the content:
    $('.content').hide();
    // Show the requested content:
    $('#' + content).show();
});

    $("a.trigger").click(function () {
        $(this).next(".content").slideToggle("slow");
    });

    $("a.close").click(function () {
        $(".content").hide("fast");
        $('.active').removeClass('active');
    });


});

见工作jsFiddle

我基本上做的是我添加了一个选择器，找到具有相同属性的所有链接＆＃39; rel＆＃39; value仅作为当前值并将类设置为.active

祝你好运

Jquery两个不同的链接显示相同的div，单击时需要两个链接显示活动状态

1 个答案: