jQuery：选择列表项，显示文本

Question

我很好奇使用附带文本构建可选列表的最佳方法是。

我没有全力以赴，而是向您展示：

或者即使您在网络上的某个地方知道类似的例子......只需指向我。

Answer 1

您所指的内容有时称为标签和窗格。以下是优秀的jQuery Tools - Tabs库中的示例，您应该查看它：

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
</div>

Answer 2

一种可能的方法如下

HTML

   <ul class="selectable">
        <li>
             This is list 1
             <p class="list-text">text goes here for list 1</p>
        </li>
        <li>
             This is list 2
             <p class="list-text">text goes here for list 2</p>
        </li>
   </ul>

这将是显示在右侧的div

   <div id="display-text"></div>

CSS

   li .list-text { display:none; }
   #display-text {float:right /* whatever styles */}

Jquery

   $('selectable').click(function(){
       $('#display-text').text($(this).children('.list-text').text());
   });

Answer 3

这是另一种方式。 jQuery，CSS和HTML的组合

http://jsfiddle.net/bryanjamesross/BES6h/

此版本使用鼠标悬停而不是单击

Answer 4

检查jQuery UI's tabs。