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

【问题标题】：Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?隐藏几个div，默认显示1个，根据链接点击在它们之间切换（显示/隐藏）？
【发布时间】：2012-12-02 20:13:33
【问题描述】：

我知道显示/隐藏的东西已经被堆栈覆盖到死，但我找不到适合我的解决方案，抱歉。我已经尝试了几种我发现的 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 或链接的命名结构。

【问题讨论】：

标签： javascript jquery html show-hide

【解决方案1】：

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

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

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

    });
});

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

【讨论】：

@AtifMohammedAmeenuddin 哈哈，那会更好。一时间我有点发疯了。
我想你的意思是：$("div#" + $(this).attr("href")).show();?编辑：没关系，没有仔细阅读开始的帖子。
@BramVanroy 不，我没有。这将导致"div##1"
@BramVanroy 没问题。感谢您查看我的语法

【解决方案2】：

如何添加一些更多的 RESTful 行为。

$(function(){
   // get the location hash
   var hash = window.location.hash;
   // hide all
   $('div.content').hide();
   if(hash){
      // show the div if hash exist
      $(hash).show();
   }else{
      // show default 
      $("#ver1").show();
   }
   $("div.containter ul li a").click(function(){
      // hide all
      $('div.content').hide();
      $($(this).attr("href")).show();
   });
});

【讨论】：

【解决方案3】：

我建议你使用on() jquery 函数和选择器。您还可以使用 css 显示默认的 div。 Here 是完整的代码。

【讨论】：