Нужна помощь: Tabs на dl dt dd
 

Посмотрел реализацию Tabs на Ul li -http://www.linkexchanger.su/2009/99.html
Мне кажется что с семантической точки зрения данный список неверно испльзуется - задавать заголовки табов в отдельном списке - как-то некошерно

Мне кажется наиболее подходящим в данном случае будет использование

<dl>

  <dt>Первая закладка</dt>
  <dd><p>Содержимое первой закладки</p></dd>

  <dt>Вторая закладка</dt>
  <dd><p>Содержимое второй закладки</p></dd>

</dl>

Встает лишь вопрос создание css для реализации Tabs как на прилагаемой картинке

Кто может - подскажите реализацию css для такого табс

wwwboy, попробуй так, сам не делал, но по идее должно сработать.
Для DL задаешь position: relativ, absolut или fixed. Для всех DT - float: left. Для всех DD - display: none и position: absolut. И координаты для позиционированных DD задаешь, чтобы они друг под другом были (стопкой лежали).
По клику в ссылке указанной в определенном DT с помощью JavaScript меняешь в соответствующем DD display на значение block.
Как вариант, можно попробовать вместо display использовать z-index и просто его зачение менять, ставя нужный слой наверх.

Да, помоему все верно, только position: absolute тут создаст проблему. лучше display: none; для всех кроме активного tab-sheet'а. Или z-index. Кстати, если tab-sheet'ы проименованы(имеют айдишники) то можно для полного счастья прописать dd:target{display: block;} Тогда будет работать даже с отключенным js :)

а что это за конструкция - dd:target
первый раз такое вижу

Что вы все так рветесь UI использовать, 5 минут не можете потратить чтобы самим эти табы написать?

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>

<script type="text/javascript">
$(function(){
	$('div a').each(function(i){
		$(this).click(function(){
			$(this).toggleClass('display').siblings().removeClass('display first');
			$('ul').each(function(){
				$(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
			});
		});
	});
});
</script>
<div id="tabs">
	<div>
		<a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
	</div>
	<ul>
		<li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
	</ul>
</div>

в одном проекте использовал, не помню где нашел:

$('ul.tabs').delegate('li:not(.current)', 'click', function() {
				$(this).addClass('current').siblings().removeClass('current')
				.parents('div.tab-container').find('div.box').hide().eq($(this).index()).show();
		});

В сотни(или мож тыщи) раз меньше чем ui tabs))

Спасибо за работающий пример, но он семантически неверен - какое отношение div имеет к конкретному li ? - правильно они связаны только логикой разработчика при помощи js, а правильно должно быть чтобы они были и семантически связаны - добавил элемент в список, а он автоматом страницей отобразился!

Согласен, но тогда содержимое "активного" DD может тоже всплыть и залезет на линию DT. Короче, либо position, либо ширину всех блоков четко контролировать... Ну еще clear есть конечно.

Пример представлен наиболее семантично, корректно и логично чем могло бы быть (с любой стороны).

Элемент <div/> не имеет никакого отношения к <li/>, за исключением того что он является родительским для элементов <a/>, которые в свою очередь имеют прямое отношение к <li/>.

Часто встречающиеся структуры для табов и пр. меню.

1.

<div>
    <ul>
        <div>
             <a></a>
         </div>
         <li></li>
    </ul>
</div>

2.

<div>
    <ul>
         <li>
              <div>
                  <a></a>
              </div> 
         </li>
         <li>
             <ul>
                 <li></li>
             </ul>
         </li>
    </ul>
</div>

и теперь моя структура:

<div id="#">
     <div>
         <a></a> - каждый элемент 'a' соответствует элементу 'li'
     <div>
     <ul>
         <li></li>
     </ul>
</div>

Что в ней нелогичного, то разве она не прозрачней или семантически не связана?
Если вас смущает что элементы а не являются дочерними 'ul', то переместите их туда, в чем проблема?

monolithed, да я думаю он имеет ввиду то, что по спецификации каждый DT соответствует своему единственному DD и больше ничему. А каждый LI - только своему родительскому UL и больше ничему. Поэтому ему и не нравятся DIVы. Так как их куда ни воткни - все не то... :)

По спецификации DT и DD - дочерние элементы DL не более того, а что ТС считает не семантичным - его право!

Смущает то что без javaScript - это все развалится и не будет никоим образом связано - какое логическое и симантическое отношение имеют div и блоки а к списку? какая гипотетическая связь между а и конкретным li - только автору javascript известно!

:D этот код понятен для большинства разработчиков, если для вас это что-то семантически не связанное, то могу только посочувствовать. Используйте jQuery UI, там много гипотетических связей с большим количеством хлама.

нет уж позвольте я всетаки буду использовать более серьезные фреймворки...)

Google, Dell, Mozilla используют jQuery, куда серьезней?

Они используют их льшь для мелких эффектов на страничках - а еще его используют все домохозяйки, куда уж серьезней )

jQuery - в первую очередь используют для упрощенной работы с DOM.
Какие тогда по вашему серьезные фрейворки?

Да их много, MotoTools, prototype и др
JQuery можно так назвать легкий фреймворк и подходит лишь для "декоративных" работ, серьезные фреймворки позволят создавать полноценные клиентские приложения

Да уж.;)

структура dl > dt + dd это конечно хорошо, вот только ее не всегда хватает. Иногда нужно чтобы все таб-листы были в одном контейнере.
Так что приходится либо вставлять div'ы в dd, что несовсем решает задачу, либо использовать другую структуру. Так что думаю тут подойдет такая разметка:

<div class="tab-control">
    <ul class="tab-items">
      <li>Таб 1</li>
      <li>Таб 2</li>
    </ul>
    <ul class="tab-sheets">
      <li>Таб 1 Содержимое</li>
      <li>Таб 2 Содержимое</li>
    </ul>  
</div>

Но тогда семантически это какбы два несвязанных списка, о чем и говорил wwwboy

Тоесть тут видим противоречие. В целях "универсализации" надо испльзовать второй вариант (ну или в измененном виде)

UPD: И да, совсем забыл: не используйте jquery.ui просто так на фронтенде сайта ! Эта библиотека нужна в админке, возможно в личном кабинете юзера или еще где, где без js не обойтись. А в обычных случаях используйте код приведенный в первых постах...