Цель:
Минимум кода,
максимум совместимости,
без использования хэшей,
без jQ UI
Текущий вариант реализации:
#wrapper div {<br>
display:none;<br>
}<br>
#wrapper.tab1 div.tab1 {<br>
display:block;<br>
width:100%;<br>
}<br>
#wrapper.tab2 div.tab2 {<br>
display:block;<br>
width:100%;<br>
}<br>
#wrapper.tab3 div.tab3 {<br>
display:block;<br>
width:100%;<br>
}<br>
#wrapper.tab1 a.tab1 {<br>
color: black;<br>
cursor: default;<br>
font-weight: bold;<br>
text-decoration: none;<br>
}<br>
#wrapper.tab2 a.tab2 {<br>
color: black;<br>
cursor: default;<br>
font-weight: bold;<br>
text-decoration: none;<br>
}<br>
#wrapper.tab3 a.tab3 {<br>
color: black;<br>
cursor: default;<br>
font-weight: bold;<br>
text-decoration: none;<br>
}<br>
<div id="wrapper" class="tab1"><br>
<a href="#" class="tab1">Вкладка 1</a><br>
<a href="#" class="tab2">Вкладка 2</a><br>
<a href="#" class="tab3">Вкладка 3</a><br>
<br>
<div class="tab1">Содержимое 1</div><br>
<div class="tab2">Содержимое 2</div><br>
<div class="tab3">Содержимое 3</div><br>
</div><br>
$('#wrapper a').click(function() {<br>
if ($(this).attr('class') != $('#wrapper').attr('class') ) {<br>
$('#wrapper').attr('class',$(this).attr('class'));<br>
}<br>
});<br>
<br>
Вопрос:
А можно сделать CSS лаконичнее?
Демо, которое можно форкать.