24 апреля, 2014 
Alexjc 
Появилась задача сделать вкладки для слайдеров. Решил следующим образом:
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#wrapper div { display:none; } #wrapper a.active { color: black; cursor: default; font-weight: bold; text-decoration: none; } #wrapper div.active { display:block; width:100%; } |
HTML:
|
1 2 3 4 5 6 7 8 |
<div id="wrapper"> <a href="javascript:void(0)" id="tab1" class="active">Вкладка 1</a> <a href="javascript:void(0)" id="tab2">Вкладка 2</a> <a href="javascript:void(0)" id="tab3">Вкладка 3</a> <div id="con_tab1" class="active">Содержимое 1</div> <div id="con_tab2">Содержимое 2</div> <div id="con_tab3">Содержимое 3</div> </div> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 |
$('#wrapper a').click(function() { var click_id=$(this).attr('id'); if (click_id != $('#wrapper a.active').attr('id') ) { $('#wrapper a').removeClass('active'); $(this).addClass('active'); $('#wrapper div').removeClass('active'); $('#con_' + click_id).addClass('active'); } }); |
http://besttrackingapps.com
Posted in 