隐藏多个div，默认显示1，并根据链接点击切换（显示/隐藏）它们之间的内容？ [英] Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?

问题描述

我知道show / hide的东西已经被覆盖死亡，但我找不到适合我的解决方案，对不起。我已经尝试了几个我找到的JS / jQuery解决方案，并且不能完全按照自己喜欢的方式行事。

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

期望的行为

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

基本HTML

 < div class =container> 
< h1>标头< / h1> 
< p>有关页面的基本信息< / p> 
< ul> 
< li>< a href =＃ver1id =linkToVer1>版本1< / a>< / li> 
< li>< a href =＃ver2id =linkToVer2>版本2< / a>< / li> 
 //更多指向其他divs的链接
< / ul> 
 
< div class =contentid =ver1> //我想这个div是默认的
 Content这里//当页面加载时。所有其他divs 
< / div> //被隐藏，直到点击链接。 
 
< div class =contentid =ver2> 
 Content here 
< / div> 
 
 //更多内容divs 
< / div> 
  

我将拥有多达12个不同版本的内容div。

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

解决方案

  $（div.containter ul li）。each（function（）{
 $（this）.onclick（function（）{
 
 $（div.content）。 hide（）; 
 
 $（div+ $（this）.attr（href））。show（）; 
 
}）; 
 }）; 
  

用 $（document）.ready


I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.

I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.

Desired behavior

I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.

Basic 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>

I'll have up to a dozen different versions of these content divs.

JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.

解决方案

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

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

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

    });
});

Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.

这篇关于隐藏多个div，默认显示1，并根据链接点击切换（显示/隐藏）它们之间的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！