Главная JavaScript

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

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

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

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

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

  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. Спасибо за скрипт, установил и настроил без особых проблем, но вот опера 10.63 отказывает переключать вкладки, не подскажете в чем дело?

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

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

    • А у вас не подключен сам скрипт табов:

      (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)

      P.S.
      Спасибо что не удалили ссылку из шаблона :)

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

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

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

    Вот это в 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. Здравствуйте! Все сделал как написано, но вот вкладки не переключаются! На чем только не пробовал и на локальном сервереи на разных блогах! ну не переключаются и все!! Пробовал скрипт из примееров ставить редультат нулевой кстата в примерах которые скачал вкладки не переключаются, а вот то что у Вас на блоге реальные примеры там работают! Пробовал и браузер другой бесполезно!!! Если можно помогите решить проблемку!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Thx!

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

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

  20. Вопрос по скрипту:
    подскажите пожалуйста, а как определить с помощью jquery какой из

    в данный момент показан, необходимо в него добавить новые записи?

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