Taburi cu jQuery (completare)

Același cod ca aici:

<div class="tabWrapper">
	<ul class="tabs clearfix">
		<li class="s"><a href="#tabId1">Tab 1</a></li>
		<li><a href="#tabId2">Tab 2</a></li>
		<li><a href="#tabId3">Tab 3</a></li>
		<li><a href="#tabId4">Tab 4</a></li>
	</ul>

	<div class="tab" id="tabId1">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId2">
		<h3>eiusmod tempor incididunt ut </h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId3">
		<h3>consectetur adipisicing elit</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId4">
		<h3>Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->
</div><!--/.tabWrapper-->

Schimbăm codul JS în :

$('.tabWrapper').each(function(){
	var tabWrap = $(this);
	tabWrap.find('.tabs li').click(function(){
		var t=$(this);
		t.siblings().removeClass('s').end().addClass('s');
		t.find('.tab').eq(t.index()).show().siblings('.tab').hide();
		return false;
	});
	t.find('.tabs li.s').click();
});

Un pic mai elegant, nu cu mult diferit de codul inițial, dar cu selectori ceva mai drăguți.

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter