javascript - Jquery如何激活div显示/隐藏

Question

我对 Jquery 和 Javascript 还很陌生，并且正在开发一个项目，我确信该项目有更简单的方法来实现相同的功能。以下是我正在做的事情的简化版本:

HTML

<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>

<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>

Jquery

$(".link1").click(function(){
    $("#div2, #div3").hide();
    $("#div1").show();
    $(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});

$(".link2").click(function(){
    $("#div1, #div3").hide();
    $("#div2").show();
    $(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});

$(".link3").click(function(){
    $("#div1, #div2").hide();
    $("#div3").show();
    $(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});

所以基本上每个链接都会立即隐藏两个不对应的 div，即使它们不一定可见，并且也会删除其他链接上的事件类，即使它们没有应用(以确保它们被删除)然后显示相应的 div 并向链接添加一个事件类。我想知道是否有一种更简单的方法来创建此功能，而不必隐藏所有其他 div 并删除所有事件类，以确保只显示我想要可见的类。

非常感谢您提供的任何帮助!

Answer 1

您可以稍微更改 HTML 以使事情变得更容易，例如:

<a class="link" href="#" rel="div1">Link 1</a>
<a class="link" href="#" rel="div2">Link 2</a>
<a class="link" href="#" rel="div3">Link 3</a>

<div class="content" id="div1">Content 1</div>
<div class="content" id="div2">Content 2</div>
<div class="content" id="div3">Content 3</div>

然后使用一个简单的函数来执行我认为你想要的操作:

$('.link').click(function(e){
    e.preventDefault();
    var content = $(this).attr('rel');
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('.content').hide();
    $('#'+content).show();
});

See a demo here 演示中还对代码进行了解释(注释)