Javascript 使用JQuery，如何链接具有相同类名的两个HTML类？

使用Javascript/Jquery，如何链接具有相同类名的两个类？单击其中一个时，将显示匹配类名的内容

  <div class="menu">
  <div>
  <a class="about link" href=#>About</a> //this is the  button to click
     </div>
    <div><a class="service link" href=#> Service</a> </div></div>

    <aside class="overlay about"> About section</aside> //the content will display depending on which button was pressed
    <aside class="overlay service"> Services </aside>

//这是要单击的按钮
关于部分//内容将根据按下的按钮显示
服务

显然，$（this）.selector从v1.7开始就被弃用了

$('a.about').click(function() {
    $('aside.about).show();
});

//这是要单击的按钮 关于部分//内容将根据按下的按钮显示 服务 $（“.link”）。单击（函数（）{ var currentSelector=$（this.attr（“x-target”）； $（“.overlay.”+currentSelector.toggle（）；//隐藏时显示，可见时隐藏 });

---

我喜欢显式地将目标设置为单击元素上的数据属性，而不是使用公共类名来执行此操作。您需要在要显示的内容和单击的元素上定义一个ID（这不是一件坏事），但我发现它使事情的运行方式更加明显

这是框架像引导程序那样做的。它们通常是值得效仿的好例子

例如：

HTML

<div class="menu">
    <div>
        <a id='about-button' data-target='#about-content' class="about link" href=#>About</a> //this is the  button to click
    </div>
    <div>
        <a class="service link" href=#> Service</a>
    </div>
</div>
<aside id='about-content' class="overlay about"> About section</aside> //the content will display depending on which button was pressed
<aside class="overlay service"> Services </aside>

---

不，因为我想使用$（“.link”）。单击（函数（）{…，然后将a“about”与旁边的“about”链接。单击的a将与覆盖匹配。我尝试使用（此）但不起作用。更改了它…更好吗？

$('document').ready(function(){

  $('.about link').click(function(){

   $('.overlay about').show();

  });

});

<div class="menu">
  <div>
  <a class="about link" href=#>About</a> //this is the  button to click
     </div>
    <div><a x-target="service" class="link" href=#> Service</a> </div></div>

    <aside class="overlay about"> About section</aside> //the content will display depending on which button was pressed
    <aside class="overlay service"> Services </aside>




$(".link").click(function() {
   var currentSelector = $(this).attr("x-target");
   $(".overlay ."+ currentSelector).toggle(); //Show if hidden and hide if visible
});

<div class="menu">
    <div>
        <a id='about-button' data-target='#about-content' class="about link" href=#>About</a> //this is the  button to click
    </div>
    <div>
        <a class="service link" href=#> Service</a>
    </div>
</div>
<aside id='about-content' class="overlay about"> About section</aside> //the content will display depending on which button was pressed
<aside class="overlay service"> Services </aside>

$('#about-button').click(function() {
    $($(this).data('target')).show(); // find the target using the stored data attribute
});