リンクをクリックして別のセクションに情報を表示

Question

私には例はありませんが、私は必要なものだけを説明することができます。

jQueryを使用して、リンクをクリックしたときに別のdivに情報を表示する方法を学習しようとしていますか？

たとえば、私は犬用のリンクのリストのために1つの列を持っています。特定の犬をクリックすると、それに関する情報を表示する別の列が表示されます。

これをjQueryでどうやって行うことができますか？そしてHTMLの見た目はどうですか？リンクのリストはリスト項目の内側にあり、各 "犬"の情報はそれ自身のコンテナにありますか？

<ul> 
    <li> Dog 1 </li> 
    <li> Dog 2 </li> 
</ul> 

<div class="dog-info"> 
    <div> 
    <h2> Dog 1 </h2> 
    <p> blah blah </p> 
</div> 

Answer 1

<ul id="dogs"> 
    <li>Beagle</li> 
    <li>Lab</li> 
</ul> 

<div id="dogInfo"> 

</div> 

とjQuery：

$(function() { 
    $('ul#dogs li').click(function() { 
    $("#dogInfo").html("More info about " + $(this).text() + " goes here"); 
    }); 
}); 

Answer 2

Here's a demo.

ここではHTMLです：

<a id="dog1" href="dog1.html">dog1</a> <div> About Dog 1 </div><br> 
<a id="dog2" href="dog2.html">dog2</a> <div> About Dog 2 </div><br> 
<a id="dog3" href="dog3.html">dog3</a> <div> About Dog 3 </div><br> 
<a id="dog4" href="dog4.html">dog4</a> <div> About Dog 4 </div><br> 

とJS：

は、

$(function() { 
    $('a ~ div').hide(); 
    $('a').click(function() { 
     $('a ~ div').hide(); 
     $(this).next().show(); 
     return false; 
    }); 
});