,
JS, . ,
JS MooTools,
jQuery . . , , , , . ,
jQuery.
HTML
, . HTML. 2 :
.
:
<ul class="tabNav">
<li class="current"><a href="#"> 1</a></li>
<li><a href="#"> 2</a></li>
<li><a href="#"> 3</a></li>
<li><a href="#"> 4</a></li>
<li><a href="#"> 5</a></li>
</ul>
. . ,
current. , , .
.
<div class="tabContainer">
<div class="tab current">
1
</div>
<div class="tab">
2
</div>
<div class="tab">
3
</div>
<div class="tab">
4
</div>
<div class="tab">
5
</div>
</div>
, .
current, ..
CSS
CSS . .
ul.tabNav li.current a { } /* */
:
div.tabContainer div.tab { display: none; }
div.tabContainer div.current { display: block; }
JavaScript
. . .
$().ready(function(){
$('ul.tabNav a').click(function() {
/* - */
return false;
});
});
, , , . ,
curChildIndex. , .
$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
return false;
});
});
current .
$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
return false;
});
});
.-
curChildIndex,
nth Child Selector
$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
$(this).removeClass('current');
$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
$(this).addClass('current');
});
});
return false;
});
});
. - . - ,
.
, .
LIci WP - WordPress crossposting plugin
