javascript打开隐藏的div太大了

Question

我有这个代码它工作正常问题是我需要将它用于 60 个链接 这将制作大约 3600 行 java 脚本代码，以便能够看到 60 个 div 的隐藏内容

抱歉来晚了，贴错代码，没用，

忘了提到我的脚本是带有两个链接的菜单，当页面加载时显示链接但不显示内容，而是显示欢迎消息，单击 about 时显示其内容，单击帮助时替换与之相适应

好的，我的示例现在可以正常工作了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#welcome-content").show();   
    $("#help-content").hide();
    $("#about-content").hide();


    $("#about-anchor").click(function(){
    $("#welcome-content").hide();   
    $("#help-content").hide();
    $("#about-content").show();
    });

    $("#help-anchor").click(function(){
    $("#welcome-content").hide();  
    $("#help-content").show();
    $("#about-content").hide();
    });
    });
</script>

    <div id="anchor-div">
      <a id="about-anchor" href="javascript:;">
       About
      </a>     
    </br>

    <a id="help-anchor" href="javascript:;">
      Help
    </a>   
    </br>    
    </div>

<div id="content-div">
  <div id="welcome-content">welcome to help system</div>    
  <div id="about-content">About=123</div>
  <div id="help-content">Help=456</div>
</div>

jsfiddle demo here

Answer 1

利用每个li的索引来显示/隐藏对应的div：

$('#anchor-div a').click(function(e) {
  e.preventDefault(); // Dont follow the Link
  $('#content-div>div').hide(); // Hide all divs with content

  var index = $(this).index('a'); // Get the position of the a relative to other a
  $('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element
});

$('#anchor-div a').click(function(e) {
  e.preventDefault(); // Dont follow the Link
  $('#content-div>div').hide(); // Hide all divs with content

  var index = $(this).index('a'); // Get the position of the a relative to other a
  $('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element (skip welcome div)
});

#content-div>div {
  display: none;
  /* Hide all divs */
}
#content-div>div:first-child {
  display: block;
  /* Show welcome */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anchor-div">
  <a href="#"> About</a><br />
  <a href="#"> Help </a>
</div>


<div id="content-div">
  <div>Welcome!</div>
  <div>About</div>
  <div>Help</div>
</div>

这样你既不需要 id 也不需要类

// 编辑：我更改了答案以匹配新问题。我使用 css 隐藏了 div（不像 js 评论中提到的那样）