Taburi cu jQuery (completare)

Același cod ca aici:

</p>
<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>
</p></div>
<p><!-- /.tab--></p>
<div class="tab" id="tabId2">
<h3>eiusmod tempor incididunt ut </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
</p></div>
<p><!-- /.tab--></p>
<div class="tab" id="tabId3">
<h3>consectetur adipisicing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
</p></div>
<p><!-- /.tab--></p>
<div class="tab" id="tabId4">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
</p></div>
<p><!-- /.tab-->
</div>
<p><!--/.tabWrapper--><br />

Schimbăm codul JS în :

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

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