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 UI .

Answer 4

Вот другой способ.Комбинация jQuery, CSS и HTML

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

В этой версии вместо наведения мыши * наведите курсор мыши