单击链接，在另一个部分中显示信息

Question

我没有任何例子，但我只能解释我需要什么。

我正在尝试使用jQuery学习如何在点击链接时在另一个div中显示信息？

例如，我为狗的链接列表提供了一个列。当单击特定的狗时，会有另一列显示有关它的信息。

我如何用jQuery来做这件事，它看起来会怎么样？链接列表是否在列表项中，每个“狗”的信息是否在它自己的容器中？

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