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

[wwwboy]

Посмотрел реализацию 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 для такого табс

[eddin]

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

[danik.js]

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

[wwwboy]

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

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

[danik.js]

http://htmlbook.ru/css/target

[monolithed]

Что вы все так рветесь 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>

[danik.js]

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

$('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))

[wwwboy]

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

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

[eddin]

Да, помоему все верно, только position: absolute тут создаст проблему. лучше display: none; для всех кроме активного tab-sheet'а.

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

[monolithed]

Спасибо за работающий пример, но он семантически невере

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

Элемент <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', то переместите их туда, в чем проблема?