4

表示/非表示がスタックで完全にカバーされていることは知っていますが、私にとって有効な解決策が見つかりません。申し訳ありません。私が見つけたいくつかの JS/jQuery ソリューションを試してみましたが、思い通りに動作させることができません。

コンテンツが非常に似ている多くの div があり (コンテンツは、選択したバージョンに基づいてわずかに変化します)、すべてまったく同じスタイルです。

望ましい動作

デフォルトで1つの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 には、最大で 12 の異なるバージョンがあります。

JS または jQuery も問題ありませんが、何らかの表示/非表示効果を追加する可能性があるため、jQuery を使用することをお勧めします。div やリンクの命名構造についてはあまり気にしません。

4

3 に答える 3

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

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

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

    });
});

またはどこにでもそれをラップして$(document).readyください、あなたは私の友人に行くのが良いはずです. コードを学んで、将来はごす。

于 2012-12-14T19:46:13.277 に答える
0

on()セレクターでjquery関数を使用することをお勧めします。divまた、 cssを使用してデフォルトを表示することもできます。これが完全なコードです。

于 2012-12-15T23:18:16.160 に答える
0

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();
   });
});
于 2012-12-14T20:02:33.850 に答える