JQuery простой пример вкладок
При клике на ссылку открывается соответствующая вкладка, а другая (ранее открытая) закрывается
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <section>
<h2>Section Title</h2>
<ul class="tab-nav">
<li><a href="#tab1" title="">Tab 1</a></li>
<li><a href="#tab2" title="">Tab 2</a></li>
</ul>
<div class="tab-contents">
<div id="tab1" class="tab-content"><!-- Tab 1 content here -->111</div>
<div id="tab2" class="tab-content"><!-- Tab 2 content here -->222</div>
</div>
</section>
<script type="text/javascript">
var tabs = {
init: function(){
var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
$tab_contents.find('.tab-content:not(:first)').hide();
$tab_nav.find('li:first').addClass('active');
$tab_nav.on('click', 'li a', function(e){
e.preventDefault();
var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
$(parent,$tab_nav).find('li').removeClass('active');
$this.parent().addClass('active');
$contents.find('.tab-content').hide();
$contents.find(activeTab).fadeIn(250);
});
}
};
$(document).ready(tabs.init());
</script> |
|