Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать Универсальный jQuery-скрипт для блоков с вкладками HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после ...

Полезные комментарии (8)
Комментарии (970)
  1. 1
    Анатолий

    Отличный скрипт. Авторам огромное СПАСИБО. Пишу систему, и использую без заморочки ваши вкладки в ней =) В целом всё отлично)

  2. 2
    Анатолий

    Да и кстате, у тех у кого не чего не работает, советую не лезть в web вёрстку и программирования, ибо не понимая таких базовых и элементарных вещей делать вам в таких степях нечего… Это я про тех кто пишет и жалуется типа не пашет не робит)

  3. 3

    Дмитрий, спасибо за скрипт!
    Только вот загвозка, приходится на табы два раза нажимать… как это можно решить не подскажите?

    пример

    <html>
    <head>
    <meta id="_moz_html_fragment">
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <title></title>
    <script type='text/javascript'>
    (function($) {
    $(function() {
    
     $('ul.tabs').delegate('li:not(.current)', 'click', function() {
     $(this).addClass('current').siblings().removeClass('current')
     .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
     })
    
    })
    })(jQuery)
    </script>
    <script type="text/javascript">
    $(function () {
     var tabContainers = $('div.tabs > div');
     tabContainers.hide().filter(':first').show();
     $('div.tabs ul.tabNavigation a').click(function () {
     tabContainers.hide();
     tabContainers.filter(this.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     $(this).addClass('selected');
     return false;
     }).filter(':first').click();
    });
    </script>
    
    <style>
    div.tabs {
    padding: 1em;
    }
    
    div.container { 
    margin: auto; 
    width: 90%; 
    margin-bottom: 10px;
    }
    
    ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
    ul.tabNavigation li {
    display: inline;
    }
    
    ul.tabNavigation li a {
    padding: 3px 9px;
    background-color: #666;
    color: #000;
    text-decoration: none;
    }
    
    ul.tabNavigation li a.selected,
    ul.tabNavigation li a.selected:hover {
    background: #FFF;
    color: #000;
    }
    
    ul.tabNavigation li a:hover {
    background: #ccc;
    color: #000;
    }
    
    ul.tabNavigation li a:focus {
    outline: 0;
    }
    
    div.tabs div {
    padding: 5px;
    margin-top: 3px;
    background: #FFF;
    }
    
    div.tabs div h2 {
    margin-top: 0;
    }
    
    
    .section {
    	margin: 0 0 30px;
    
    }
    
    ul.tabs {
    	height: 28px;
    	line-height: 25px;
    	list-style: none;
    	border-bottom: 1px solid #DDD;
    	background: #FFF;
    }
    
    .tabs li {
    	float: left;
    	display: inline;
    	margin: 0 1px -1px 0;
    	padding: 0 13px 1px;
    	color: #777;
    	cursor: pointer;
    	background: #F9F9F9;
    	border: 1px solid #E4E4E4;
    	border-bottom: 1px solid #F9F9F9;
    	position: relative;
    }
    
    .tabs li:hover,
    .vertical .tabs li:hover {
    
    	color: #F70;
    
    	padding: 0 13px;
    
    	background: #FFFFDF;
    
    	border: 1px solid #FFCA95;
    
    }
    
    .tabs li.current {
    
    	color: #444;
    
    	background: #EFEFEF;
    
    	padding: 0 13px 2px;
    
    	border: 1px solid #D4D4D4;
    
    	border-bottom: 1px solid #EFEFEF;
    
    }
    
    .box {
    
    	display: none;
    
    	border: 1px solid #D4D4D4;
    
     border-width: 0 1px 1px;
    
    	background: #EFEFEF;
    
    	padding: 0 12px;
    
    }
    
    .box.visible {
    
    	display: block;
    
    }
    
    
    
    .section.vertical {
    
    	width: 440px;
    
    	border-left: 160px solid #FFF;
    
    }
    
    .vertical .tabs {
    
    	width: 160px;
    
    	float: left;
    
    	display: inline;
    
    	margin: 0 0 0 -160px;
    
    }
    
    .vertical .tabs li {
    
    	padding: 0 13px;
    
    	margin: 0 0 1px;
    
    	border: 1px solid #E4E4E4;
    
    	border-right: 1px solid #F9F9F9;
    
    	width: 132px;
    
    	height: 25px;
    
    }
    
    .vertical .tabs li:hover {
    
    	width: 131px;
    
    }
    
    .vertical .tabs li.current {
    
    	width: 133px;
    
    	color: #444;
    
    	background: #EFEFEF;
    
    	border: 1px solid #D4D4D4;
    
     border-right: 1px solid #EFEFEF;
    
     margin-right: -1px;
    
    }
    
    .vertical .box {
    
     border-width: 1px;
    
    }
    </style>
    </head>
    <body>
    <div class="section">
    <div class="box visible">
    <table style="text-align: left; width: 100%;" border="1" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>
    <td style="vertical-align: top;">
    <div style="background-color: rgb(55, 55, 55);" align="right">	
    <ul class="tabs">
    		<li class="current">Первая вкладка</li>
    		<li>Вторая вкладка</li>
    		<li>Третья вкладка</li>
    		<li>Червертая вкладка</li>
    	</ul>
    </div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; height: 5px;" bgcolor="#fbd993"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div style="background-color: rgb(50, 53, 101);" align="right"><input
    type="button"></div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div style="float: left; height: 120px; width: 30%;">
    <table style="text-align: left; width: 100%;" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    
    </tr>
    </tbody>
    </table>
    <br>
    </div>
    <div style="float: left; height: 1px; width: 70%;">
    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;" height:5px;="" bgcolor="#a19bba">
    <br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div class="tabs">
    <ul class="tabNavigation">
     <li><a href="#first">First</a></li>
     <li><a href="#second">Second</a></li>
     <li><a href="#third">Third</a></li>
     </ul><br/>
    <div id="first">
    <div style="border: 1px solid black; float: left; height: 200px; width: 39%;">12334</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">12334</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">12334</div>
    </div>
    <div id="second">
    <div style="border: 1px solid black; float: left; height: 200px; width: 49%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">55555</div>
    </div>
    <div id="third">
    <div style="border: 1px solid black; float: left; height: 200px; width: 49%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">55555</div>
    </div>
    </div>
    </td> <!--.section -->
    </tr>
    </tbody>
    </table>
    <br>
    <br>
    </div>
    <!-- НАЧАЛО ВТОРООГО ТАБА! !-->
    	<div class="box">
    <table style="text-align: left; width: 100%;" border="1" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>
    <td style="vertical-align: top;">
    <div style="background-color: rgb(55, 55, 55);" align="right">	
    <ul class="tabs">
    		<li class="current">Первая вкладка</li>
    		<li>Вторая вкладка</li>
    		<li>Третья вкладка</li>
    		<li>Червертая вкладка</li>
    	</ul>
    </div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; height: 5px;" bgcolor="#fbd993"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div style="background-color: rgb(50, 53, 101);" align="right"><input
    type="button"></div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div style="float: left; height: 120px; width: 30%;">
    <table style="text-align: left; width: 100%;" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(73, 73, 122);"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    
    </tr>
    </tbody>
    </table>
    <br>
    </div>
    <div style="float: left; height: 1px; width: 70%;">
    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    <td
    style="vertical-align: top; background-color: rgb(139, 136, 159);"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;" height:5px;="" bgcolor="#a19bba">
    <br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;">
    <div class="tabs">
    <ul class="tabNavigation">
     <li><a href="#first">First</a></li>
     <li><a href="#second">Second</a></li>
     <li><a href="#third">Third</a></li>
     </ul><br/>
    <div id="first">
    <div style="border: 1px solid black; float: left; height: 200px; width: 39%;">12334</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">12334</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">12334</div>
    </div>
    <div id="second">
    <div style="border: 1px solid black; float: left; height: 200px; width: 49%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">55555</div>
    </div>
    <div id="third">
    <div style="border: 1px solid black; float: left; height: 200px; width: 49%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%;">44444</div>
    <div style="border: 1px solid black; float: left; height: 200px; width: 25%; fh">55555</div>
    </div>
    </div>
    </td> 
    </tr>
    </tbody>
    </table>
    </div>
    <!-- Конец второого ТАБА !-->
    </div>
    </body>
    </html>
    
  4. 5
    Альберт

    Спасибо за скрипт, установил и настроил без особых проблем, но вот опера 10.63 отказывает переключать вкладки, не подскажете в чем дело ?

  5. 7
    winchester7

    Добрый день! Попробовал поставить на DLE 9. Что-то у меня проблемка вышла.. Вообще там вроде с 9 версии jQuery итак подключается, но без подключения файла с гугла ничего не работало. Взял полностью css из примера, вставил в style.css . Все получилось кроме одного. Вкладки не кликабельны и поэтому не переключаются. Не подскажете в чем может быть проблема?

  6. 9
    winchester7

    Вот сайт: http://bred.winchester7.ru
    В левой панели внизу…

  7. 11
    winchester7

    А за ссылку благодарить то пока не за что.. Она там все равно во внутреннюю преобразована) Вот шабом займусь на неделе. Изменю все и наверно сделаю внешкой… :)
    Вам спасибо за прекрасный шаблон!

  8. 12
    winchester7

    Странно… Попробовал сейчас вставить скрипт сразу в head и все заработало… А почему не подключается то? В чем ошибка? :)

  9. 15
    winchester7

    Как-же? Подключен..

    Вот это в head прописал:

    <script type="text/javascript" src="http://bred.winchester7.ru/templates/blog/js/tabs.js"></script>

    А это в самом файле:

    (function($) {
    $(function() {
    
     $('ul.tabs').each(function() {
     $(this).find('li').each(function(i) {
     $(this).click(function(){
     $(this).addClass('current').siblings().removeClass('current')
     .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
     });
     });
     });
    
    })
    })(jQuery)
  10. 16
    абрам

    Здравствуйте !Все сделал как написано но вот вкладки не переключаются!На чем только не пробовал и на локальном сервереи на разных блогах!ну не переключаются и все!!Пробовал скрипт из примееров ставить редультат нулевой кстата в примерах которые скачал вкладки не переключаются а вот то что у Вас на блоге реальные примеры там работают!Пробовал и браузер другой бесполезно!!!Если можно помогите решить проблемку!

  11. 18
    Абрам

    Спасибо я уже разобрался! не правильно подключал скрипт!А не подскажете как сделать табулированое меню в хедере!

  12. 20
    Михаил

    Подскажите, как сделать, чтобы не было прокрутки экрана при нажатии?

  13. 23
    Абрам

    Не совсем понятно как по аналогии подключить в хедере!стили это уже второе !Перерыл весь интернет ни у кого нет !Есть описание общее, да пример смотришь все работает но как прикрутить это к блогу ни кто ще не написал !

  14. 25
    Абрам

    да но ссылки на страницы тоже в ручную свтавлять??? ведь есть функция wp_list_pages или вы предлагаете скопировать полностью весь хтмл в хедер а потом вручную прописать все ссылки на страницы я правильно понял?

  15. 27
    zeleniy

    Здравствуйте,я конечно извиняюсь за наивный вопрос который щас задам,но нчинающим наверное простительно.
    Если я правильно понял, для того чтобы подключить фреймворк прописать его код необходимо в файл header.php используемой темы, jQuery-скрипт (который я скачал) можно закинуть и в корень сайта,главное указать путь ,например

    <script type="text/javascript" src="http://мойсайт/tabs.js"></script>

    и всё это дело записать в header.php после файла фреймворка (пожалуйста поправьте если я неправильно понял). А вот куда имено прописывать HTML-код и обязательные CSS-стили?В какие файлы и в какое место? И самое главное,каким образом выводить нужные мне блоки?

    • 28

      А вот куда имено прописывать HTML-код и обязательные CSS-стили?

      Если речь про WordPress, то стили в файл style.css, а HTML-код в то место шаблона, где хотите видеть табы.

      И самое главное,каким образом выводить нужные мне блоки?

      В Интернете полно описаний по функциям WordPress, не поленитесь поискать.

  16. 29
    ildar

    Добрый день Дмитрий, скрипт отличный благодарю, ед. вопрос — возможно ли на его базе сделать что-то типа вкладок в браузере, т.е фишка в том что:
    1 — при переходе между табами открывались отдельные независимые страницы а не куски текста, к примеру при нажатии на таб1.. таб10 открывались страницы info1/index.php ..info2/index.php и в чем главная фишка — чтобы они были независимы друг от друга — тоесть я могу переключаться между табами как в обычном браузере — типа браузер в браузере или вкладки во вкалдке.

    Такое вообще возможно если нет то существуют ли таковые решения?
    Заранее Благодарю!

  17. 31
    ildar

    Ага благодарю Дим, посмотрю, пока я нашел этот тоже замечательный ресурс и тему, вроде от части мое:
    http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

    Thx!

  18. 32
    Alexlion12

    Скрипт мне понравился, спасибо за очень простой незамусоренный пример и хорошие разъяснения! Хотелось бы спросить профессионалов — а как сделать так, чтобы табы переключались не по событию нажатия мышкой, а автоматически секунды через 3, чтобы получился ротатор дивов?

  19. 33
    Garaevs

    Сколько бы ни пытался, не смог все это сотворить. В принципе, кажется что делаю все так же, а нет. ну просто не выходит. В подобном не силен. Жаль что не смог

  20. 34
    Евгений

    Вопрос по скрипту:
    подскажите пожалуйста, а как определить с помощью jquery какой из
    ….
    в данный момент показан, необходимо в него добавить новые записи?

  1. 1

    Видимо, это косяк Файерфокса. А по поводу Вконтакте вот тут описывал решение.

  2. 2
    evgen

    путем нехитрых манипуляций делаем Ваш скрипт еще более универсальным

    (function($) {
    	$(function() {
    
    		$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    			$(this).addClass('current').siblings().removeClass('current')
    				.parents('div.section').eq(0).find('>div.box').hide().eq($(this).index()).show();
    			return false;
    		})
    
    	})
    })(jQuery)
    
    <div class="section">
    
    	<ul class="tabs">
    		<li class="current">Первая вкладка</li>
    		<li>Вторая вкладка</li>
    		<li>Третья вкладка</li>
    		<li>Червертая вкладка</li>
    	</ul>
    
    	<div class="box visible">
    	<!-- Inner Tabs -->
    		<div class="section">
    			<ul class="tabs">
    				<li class="current">inner 1</li>
    				<li>inner 2</li>
    			</ul>
    			<div class="box visible">
    				<h2>inner 1</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    			<div class="box">
    				<h2>inner 2</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    		</div>
    	<!--End Inner Tabs-->
    		<h2>1</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    	</div>
    
    	<div class="box">
    		<h2>2</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    		<p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    	</div>
    
    	<div class="box">
    		<h2>3</h2>
    		<p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
    		<p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
    	</div>
    
    	<div class="box">
    		<h2>4</h2>
    		<p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
    		<p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    		<p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    	</div>
    
    </div>
    

    теперь можно создавать вложенные табы

  3. 3
    ITech

    Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: http://injoit.com/what-we-do/

    Реализовал твой код, Dimox, на своем сайте с небольшими изменениями. Вся загвоздка в том, что все div.box необходимо обтянуть еще одним div и для него определить фиксированную высоту!

    Так как у меня контент в табах на сайте постоянно меняется, подключил механизм Math.max.apply для расчета максимально возможной высоты вложенного дива .box. Эту высоту и задавал внешнему диву..

    Для эффекта появления использовал вместо show() animate() с указанием четких параметров:

    (function($) {
    $(function() {
    
    	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    		$(this).addClass('current').siblings().removeClass('current')
    		.parents('div.section').find('div.box').hide().eq($(this).index()).animate({height: 'auto', width: 'auto', opacity: 'show'}, 'slow');
    	})
    
    /*--Определение максимальной высоты для блока-контейнера .box-wrap--*/
    	Array.max = function(array) {
     return Math.max.apply(Math,array);
     };
    	var heights = $('.box-wrap div.box').map(function() {
     return $(this).innerHeight();
     }).get();
    	$(".box-wrap").height(Array.max(heights));
    /*--------*/
    
    })
    })(jQuery)
    

    И собственно HTML:

    <div class="section vertical">
    <ul class="tabs">
    	<li class="current"><span>Mobile</span></li>
    	<li><span>Social and Web</span></li>
    	<li><span>Cloud</span></li>
    </ul>
    <div class="box-wrap">
    <div class="box visible">
    ---
    </div>
    <div class="box">
    ---
    </div>
    <div class="box">
    ---
    </div>
    </div>
    </div>
    

    Не знаю, правильно я сделал или нет, но главное ведь, что оно работает) Буду рад услышать твои комментарии по данному поводу.

  4. 4

    По теме перепрыгивания вверх при переключении табов.
    В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
    И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
    Мне лично помогла установка min-height для родительского блока табов.

    .section {
    	min-height: 1px;
    	}

    проверял в ie7> и нормальных браузерах — вроде бы работает.

  5. 5
    maqsim

    Вместо:
    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {

    Поставьте:
    $(‘ul.tabs li:not(.current)’).live(‘click’, function() {

    Проблема первого элемента в том, что некорректно связываются события через метод delegate, когда разметка с вкладками подгружена через ajax. Второй вариант работает отлично + мы делаем 1 раз выборку, а не 2

  6. 6
    Metaller

    Проблема прыгающей страницы при переключении табов в том, что в момент переключения сначала прячется содержимое всех табов, а потом показывается содержимое активного таба. В момент, когда содержимое всех табов спрятано — контента на странице становится меньше и браузер прокручивает страницу вверх. Когда новый таб появляется — скрол остается на той же странице.

    Решение — не прятать все табы, а только ненужные:

    .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings().hide();
    
  7. 7

    Если кому интересно — ещё одно простое решение для перехода к нужному табу по клику на стороннем элементе.

    $('[data-tab-target]').click(function(e) {
    		$("html, body").animate({scrollTop:$('#'+$(this).data('tab-target')).offset().top-50}, 500); //прокручиваем страницу чуть выше положения цели
    		$('#'+$(this).data('tab-target')).trigger('click');
    		return false;
    	});
    <span data-tab-target="tab-2">перейти к табу #tab-2</span>

    у

    <div class="section">
     <ul class="tabs">
     <li class="current">1-я вкладка</li>
     <li id="tab-2">2-я вкладка</li>
     </ul>
     <div class="box visible">
     Содержимое первого блока
     </div>
     <div class="box">
     Содержимое второго блока
     </div>
    </div><!-- .section -->
  8. 8

    Вот код, который это делает (доработан 4-й пример):

    (function($) {
    $(function() {
    
    	$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    		$(this)
    			.addClass('active').siblings().removeClass('active')
    			.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
    	});
    
    	var tabIndex = window.location.hash.replace('#tab','')-1;
    	if (tabIndex != -1) {
    		$('ul.tabs__caption li').eq(tabIndex).click();
    		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
    	}
    
    	$('a[href*=#tab]').click(function() {
    		var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
    		$('ul.tabs__caption li').eq(tabIndex).click();
    		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
    	});
    
    });
    })(jQuery);

    Число 50 (в двух местах) — это отступ между блоком и верхней границей окна браузера после прокрутки к блоку. 700 — это скорость прокрутки, в данном случае 0,7 секунды.

Ваш комментарий