Question

我知道show / hide的东西在堆栈上已经被覆盖了，但我找不到适合我的解决方案，抱歉。我已经尝试了几个我发现的JS / jQuery解决方案，并且不能让我按照我喜欢的方式行事。

我有很多内容非常相似的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或链接的命名结构并不在意。

Answer 1

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

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

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

    });
});

在$(document).ready或者{{1}}中包裹它，你应该好好去找我的朋友。学习代码，以便将来成为gosu。

Answer 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();
   });
});

Answer 3

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

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

期望的行为

基本HTML

3 个答案: