javascript - 编写由许多链接和打开/关闭 div 组成的 jQuery 代码的更好方法

Question

我有 12 个链接，每个链接都会更改显示在右侧的 div。我觉得我在使用多次点击和隐藏语句时效率很低。

$(document).ready(function() {
  /*PSEUDO CODE*/
  
  /*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/
  
});

.box {
  border: 0.1em solid #000;
  margin: 1em;
  width: 70%;
}
.box a {
  padding: 2.5em;
}

<div class="box">
  <a href="#" id="link-one">Hello</a>
  <a href="#" id="link-two">Hello</a>
  <a href="#" id="link-three">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-four">Hello</a>
  <a href="#" id="link-five">Hello</a>
  <a href="#" id="link-six">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-seven">Hello</a>
  <a href="#" id="link-eight">Hello</a>
  <a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-ten">Hello</a>
  <a href="#" id="link-eleven">Hello</a>
  <a href="#" id="link-twelve">Hello</a>
</div>

<div class="dynamic-div">
  <div class="link-box" id="link-one-box">
  </div>
  <div class="link-box" id="link-two-box">
  </div>
  <div class="link-box" id="link-three-box">
  </div>
  <div class="link-box" id="link-four-box">
  </div>
  <div class="link-box" id="link-five-box">
  </div>
  <div class="link-box" id="link-six-box">
  </div>
  <div class="link-box" id="link-seven-box">
  </div>
  <div class="link-box" id="link-eight-box">
  </div>
  <div class="link-box" id="link-nine-box">
  </div>
  <div class="link-box" id="link-ten-box">
  </div>
  <div class="link-box" id="link-eleven-box">
  </div>
  <div class="link-box" id="link-twelve-box">
  </div>
</div>

我当前的 JavaScript 最初隐藏了每个 div，然后当单击一个链接时，它会手动告诉所有其他 div 关闭但保持被单击的那个打开。这看起来效率很低，如果有人能给我一些关于如何让它不那么冗长的指示，我将不胜感激。

Answer 1

是这样的吗？

$("a[id^=link]").click(function(){
    $(".link-box").hide();
    $("#"+this.id+"-box").show();
})

1. 检查是否有 <a> id 以 link 开头被点击

2. 隐藏所有框

3. 打开框，id 为点击链接的 id + -box

演示:

$("a[id^=link]").click(function(){
    $(".link-box").hide();
    $("#"+this.id+"-box").show();
})

.link-box{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <a href="#" id="link-one">Hello</a>
  <a href="#" id="link-two">Hello</a>
  <a href="#" id="link-three">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-four">Hello</a>
  <a href="#" id="link-five">Hello</a>
  <a href="#" id="link-six">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-seven">Hello</a>
  <a href="#" id="link-eight">Hello</a>
  <a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-ten">Hello</a>
  <a href="#" id="link-eleven">Hello</a>
  <a href="#" id="link-twelve">Hello</a>
</div>

<div class="dynamic-div">
  <div class="link-box" id="link-one-box">1
  </div>
  <div class="link-box" id="link-two-box">2
  </div>
  <div class="link-box" id="link-three-box">3
  </div>
  <div class="link-box" id="link-four-box">4
  </div>
  <div class="link-box" id="link-five-box">5
  </div>
  <div class="link-box" id="link-six-box">6
  </div>
  <div class="link-box" id="link-seven-box">7
  </div>
  <div class="link-box" id="link-eight-box">8
  </div>
  <div class="link-box" id="link-nine-box">9
  </div>
  <div class="link-box" id="link-ten-box">10
  </div>
  <div class="link-box" id="link-eleven-box">11
  </div>
  <div class="link-box" id="link-twelve-box">12
  </div>
</div>