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

我有两个不同的链接，显示一个隐藏的div。我想要显示链接被点击时显示两个链接的活动状态以显示隐藏的div。jquery两个不同的链接显示相同的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'); 
    }); 
});

来源

2014-09-11 LynnG195

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

$(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

我所做的基本上是我补充说，找出所有具有相同属性的链接选择“相对”值作为目前唯一和设定的类别.active

好运

来源

2014-09-11 01:09:42 malkassem

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

回答

相关问题