隐藏多个div，默认显示1，并根据链接点击在它们之间切换（显示/隐藏）？

我知道显示/隐藏的事情已经在堆栈上被覆盖得很厉害，但我只是找不到适合我的解决方案，抱歉。我已经尝试了几种我发现的 JS/jQuery 解决方案，但无法完全让其中一个按照我想要的方式运行。

我有许多内容非常相似的 div（内容根据所选版本略有变化），并且都具有完全相同的样式。

期望的行为

我希望默认显示一个 div，而其他所有 div 都隐藏。然后，根据链接点击，显示不同版本的 div，并隐藏所有其他内容 div。

基本 HTML

<div class="container">
  <h1>Header</h1>
  <p>Basic info about page</p>
  <ul>
    <li><a href="#ver1" id="linkToVer1">Version 1</a></li>
    <li><a href="#ver2" id="linkToVer2">Version 2</a></li>
    // More links to other divs
  </ul>

  <div class="content" id="ver1">    // I'd like this div to be the default
     Content here                    // when the page loads. All other divs 
  </div>                             // are hidden until a link is clicked.

  <div class="content" id="ver2">
     Content here
  </div>

  // More content divs
</div>

我将拥有这些内容 div 的多达十几个不同版本。

JS 或 jQuery 都可以，但首选 jQuery，因为我可能会添加某种显示/隐藏效果。我不太关心 div 或链接的命名结构。

$("div.containter ul li").each(function(){
    $(this).onclick(function(){

       $("div.content").hide();

      $("div" + $(this).attr("href")).show();

    });
});

将其包裹在一个$(document).ready或任何地方，你应该很高兴去我的朋友。学好代码，这样以后你就是gosu了。