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。