Переключение вкладок

[vladimir]

Подскажите пожалуйста. Как можно сделать переключение вкладок на странице как на этом сайте
Поставил такой код, но у меня не работает

Код Выделить Развернуть

[html]
<div class="col-4" style="float: left; width: 326.328px; padding-right: 15px; color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;, sans-serif; font-size: 13px;"><img alt="Жариков Д.В.-2.jpg" src="http://сайт.ru/upload/ZHarikovDmitrijVyacheslavovich.jpg" title="Жариков Д.В.-2.jpg" height="450" width="300" align="left" style="border: 0px; padding: 0px 20px 20px;"></div><div class="col-8" style="width: 637px; float: left; color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;, sans-serif; font-size: 13px;"><h2 style="font-weight: 400; margin: 0px 0px 15px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: normal;">Жариков Дмитрий Вячеславович</h2><br><div class="tabs"><ul style="margin: 0px; padding: 0px;"><li class="active" data-page="0" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline; color: rgb(5, 89, 139);">Биография</li>&nbsp;<li data-page="1" class="" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline;">Контакты</li>&nbsp;<li data-page="3" class="" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline;">Отчёты</li></ul><div><div class="tab">&nbsp;Родился&nbsp;9 ноября 1975 года в п. Заокский Тульской области.&nbsp;<br><br>&nbsp;<i>Образование:</i><br><br>1990-1992 гг. - Московское суворовское военное училище.<br>1992-1997 гг. - Военный&nbsp;университет&nbsp;МО РФ, прокурорско-следственный факультет.<br><br>&nbsp;<i>Военная служба:</i><br>&nbsp;&nbsp;<br>&nbsp;1997 г. -&nbsp;военная&nbsp;прокуратура&nbsp;Тоцкого гарнизона Приволжского военного округа:<br>-&nbsp;следователь&nbsp;военной прокуратуры;<br>-&nbsp;старший следователь военной прокуратуры Самарского гарнизона;<br>-&nbsp;помощник&nbsp;военного прокурора Самарского гарнизона Приволжского военного округа;<br>&nbsp;-&nbsp;2000 г. - помощник&nbsp;военного прокурора Приволжского военного округ;<br>-&nbsp;военный прокурор&nbsp;отдела надзора военной прокуратуры Приволжского военного округа;<br>-&nbsp;1998 по 2001 гг. -&nbsp;выполнение задач&nbsp;в условиях чрезвычайного положения в зонах вооруженных конфликтов в Таджикистане, Абхазии и Грузии;<br>&nbsp;-&nbsp;2001-2007 гг. - заместитель&nbsp;военного прокурора Подольского гарнизона;<br>&nbsp;-&nbsp;2007-2009 гг. -&nbsp;руководитель&nbsp;военного следственного отдела Следственного комитета при прокуратуре РФ по Подольскому гарнизону Московского военного &nbsp;округа.<br><br>&nbsp;<i>Трудовая деятельность:</i><br><br>-&nbsp;2009-2015 гг. - Администрация&nbsp;города Подольска Московской области:<br>&nbsp;- 2009 г. - начальник&nbsp;Правового управления;<br>-&nbsp;2010&nbsp;г. - заместитель главы администрации – начальник&nbsp;Управления по правовым вопросам и обеспечению деятельности Администрации города Подольска;<br>&nbsp;- 2011 г. - заместитель главы администрации по правовым вопросам и управлению муниципальной собственностью;<br>- 2014 г. - заместитель главы администрации.<br>- 2015 г. - Администрация города Серпухова Московской области.<br>- май 2015 г. -&nbsp;и.&nbsp;о.&nbsp;Главы города Серпухова.<br>- ноябрь 2015 - Глава города Серпухова.<br><br><i>Награды:</i><br><br>- медаль&nbsp;МО РФ «За отличие в военной службе» III степени;<br>-&nbsp;медаль&nbsp;МО РФ «За отличие в военной службе» II степени;<br>-&nbsp;медаль&nbsp;МО РФ «За воинскую доблесть» II степени;<br>-&nbsp;медаль&nbsp;МО РФ «200 лет Министерству обороны»;<br>-&nbsp;медалью МВД РФ «200 лет МВД России»;<br>-&nbsp;знак&nbsp;отличия ГП РФ «За верность закону» III степени;<br>-&nbsp;медаль&nbsp;МВД России «За содействие»;<br>-&nbsp;знак&nbsp;Губернатора Московской области «За ратную службу»;<br>-&nbsp;медаль&nbsp;«За заслуги в проведении Всероссийской переписи населения 2010 года»;<br>-&nbsp;почетный&nbsp;знак&nbsp;города Подольска «Добро и милосердие»;<br>-&nbsp;знак&nbsp;отличия «За заслуги перед городом Подольском» I степени;<br>-&nbsp;Почетная&nbsp;грамота&nbsp;Министерства имущественных отношений Московской области.<br><br><i>Семейное положение:</i><br><br>Женат, воспитывает&nbsp;сына.</div></div></div></div>
[/html]

[GeorG]

Там сделано на jquery.
Т.е., подключаете в библиотеку jquery, пишете код скрипта обработки вкладок.

[vladimir]

Пробовал подключить вот от сюда, но вкладки не переключаются. Подскажите что я не так сделал?

Код Выделить Развернуть

[html]
<h1 style="margin: 0px 0px 15px; font-size: 28px; color: rgb(51, 51, 51); font-weight: 400; padding: 0px; font-stretch: normal; line-height: normal; font-family: &quot;Open Sans&quot;, sans-serif;">Отчеты</h1><div class="col-4" style="float: left; width: 326.328px; padding-right: 15px; color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;, sans-serif; font-size: 13px;"><img alt="Жариков Д.В.-2.jpg" src="http://serpuhov.ru/upload/medialibrary/23e/%D0%96%D0%B0%D1%80%D0%B8%D0%BA%D0%BE%D0%B2%20%D0%94.%D0%92.-2.jpg" title="Жариков Д.В.-2.jpg" height="450" width="300" align="left" style="border: 0px; padding: 0px 20px 20px;"></div><div class="col-8" style="width: 637px; float: left; color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;, sans-serif; font-size: 13px;"><h2 style="font-weight: 400; margin: 0px 0px 15px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: normal;">Жариков Дмитрий Вячеславович</h2><br><div class="tabs"><ul style="margin: 0px; padding: 0px;"><li class="active" data-page="0" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline; color: rgb(5, 89, 139);">Биография</li>&nbsp;<li data-page="1" class="" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline;">Контакты</li>&nbsp;<li data-page="3" class="" style="list-style: none; padding: 0px 0px 0px 16px; margin: 0px 0px 20px; display: inline-block; font-size: 18px; cursor: pointer; text-decoration: underline;">Отчёты</li></ul><div><div class="tab">&nbsp;Родился&nbsp;9 ноября 1975 года в п. Заокский Тульской области.&nbsp;<br><br>&nbsp;<i>Образование:</i><br><br>1990-1992 гг. - Московское суворовское военное училище.<br>1992-1997 гг. - Военный&nbsp;университет&nbsp;МО РФ, прокурорско-следственный факультет.<br><br>&nbsp;<i>Военная служба:</i><br>&nbsp;&nbsp;<br>&nbsp;1997 г. -&nbsp;военная&nbsp;прокуратура&nbsp;Тоцкого гарнизона Приволжского военного округа:<br>-&nbsp;следователь&nbsp;военной прокуратуры;<br>-&nbsp;старший следователь военной прокуратуры Самарского гарнизона;<br>-&nbsp;помощник&nbsp;военного прокурора Самарского гарнизона Приволжского военного округа;<br>&nbsp;-&nbsp;2000 г. - помощник&nbsp;военного прокурора Приволжского военного округ;<br>-&nbsp;военный прокурор&nbsp;отдела надзора военной прокуратуры Приволжского военного округа;<br>-&nbsp;1998 по 2001 гг. -&nbsp;выполнение задач&nbsp;в условиях чрезвычайного положения в зонах вооруженных конфликтов в Таджикистане, Абхазии и Грузии;<br>&nbsp;-&nbsp;2001-2007 гг. - заместитель&nbsp;военного прокурора Подольского гарнизона;<br>&nbsp;-&nbsp;2007-2009 гг. -&nbsp;руководитель&nbsp;военного следственного отдела Следственного комитета при прокуратуре РФ по Подольскому гарнизону Московского военного &nbsp;округа.<br><br>&nbsp;<i>Трудовая деятельность:</i><br><br>-&nbsp;2009-2015 гг. - Администрация&nbsp;города Подольска Московской области:<br>&nbsp;- 2009 г. - начальник&nbsp;Правового управления;<br>-&nbsp;2010&nbsp;г. - заместитель главы администрации – начальник&nbsp;Управления по правовым вопросам и обеспечению деятельности Администрации города Подольска;<br>&nbsp;- 2011 г. - заместитель главы администрации по правовым вопросам и управлению муниципальной собственностью;<br>- 2014 г. - заместитель главы администрации.<br>- 2015 г. - Администрация города Серпухова Московской области.<br>- май 2015 г. -&nbsp;и.&nbsp;о.&nbsp;Главы города Серпухова.<br>- ноябрь 2015 - Глава города Серпухова.<br><br><i>Награды:</i><br><br>- медаль&nbsp;МО РФ «За отличие в военной службе» III степени;<br>-&nbsp;медаль&nbsp;МО РФ «За отличие в военной службе» II степени;<br>-&nbsp;медаль&nbsp;МО РФ «За воинскую доблесть» II степени;<br>-&nbsp;медаль&nbsp;МО РФ «200 лет Министерству обороны»;<br>-&nbsp;медалью МВД РФ «200 лет МВД России»;<br>-&nbsp;знак&nbsp;отличия ГП РФ «За верность закону» III степени;<br>-&nbsp;медаль&nbsp;МВД России «За содействие»;<br>-&nbsp;знак&nbsp;Губернатора Московской области «За ратную службу»;<br>-&nbsp;медаль&nbsp;«За заслуги в проведении Всероссийской переписи населения 2010 года»;<br>-&nbsp;почетный&nbsp;знак&nbsp;города Подольска «Добро и милосердие»;<br>-&nbsp;знак&nbsp;отличия «За заслуги перед городом Подольском» I степени;<br>-&nbsp;Почетная&nbsp;грамота&nbsp;Министерства имущественных отношений Московской области.<br><br><i>Семейное положение:</i><br><br>Женат, воспитывает&nbsp;сына.</div></div></div></div>
[/html]

[Vadim2268]

1. Как уже сказал GeorG подключить библиотеку jquery:

Код Выделить Развернуть

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. Добавить сам скрипт:

Код Выделить Развернуть

<script>
      jQuery(document).ready(function ($) {
        $("#owl-example").owlCarousel({
          autoPlay: 10000,
          items: 5
        });

        $(".car").owlCarousel({
          autoPlay: 10000,
          navigation: false,
          pagination: false,
          singleItem: true,
          items: 1,
          itemsDesktop: false,
          itemsDesktopSmall: false,
          itemsTablet: false,
          itemsMobile: false
        });


$('.tabs li').click(function(){
$(this).parent('ul').find('li').removeClass('active'); $(this).addClass('active')
$(this).parents('.tabs').find('.tab').hide(0).eq($(this).index()).show(0)
})

      });
    </script>
3. Сам код:

Код Выделить Развернуть

<div class="tabs">
<ul>
<li class="active" data-page="0">Биография</li>
<li data-page="1" class="">Контакты</li>
<!--<li data-page="2" class="">Советники</li>-->
<li data-page="3" class="">Отчёты</li>
</ul>
<div>
<div style="display: block;" class="tab">
&nbsp;Родился&nbsp;9 ноября 1975 года в п. Заокский Тульской области. <br>
 <br>
&nbsp;<i>Образование:</i><br>
 <br>
1990-1992 гг. - Московское суворовское военное училище.<br>
1992-1997 гг. - Военный&nbsp;университет&nbsp;МО РФ, прокурорско-следственный факультет.<br>
 <br>
&nbsp;<i>Военная служба:</i><br>
&nbsp; <br>
&nbsp;1997 г. -&nbsp;военная&nbsp;прокуратура&nbsp;Тоцкого гарнизона Приволжского военного округа:<br>
-&nbsp;следователь&nbsp;военной прокуратуры;<br>
-&nbsp;старший следователь военной прокуратуры Самарского гарнизона;<br>
-&nbsp;помощник&nbsp;военного прокурора Самарского гарнизона Приволжского военного округа;<br>
&nbsp;-&nbsp;2000 г. - помощник&nbsp;военного прокурора Приволжского военного округ;<br>
-&nbsp;военный прокурор&nbsp;отдела надзора военной прокуратуры Приволжского военного округа;<br>
-&nbsp;1998 по 2001 гг. -&nbsp;выполнение задач&nbsp;в условиях чрезвычайного положения в зонах вооруженных конфликтов в Таджикистане, Абхазии и Грузии;<br>
&nbsp;-&nbsp;2001-2007 гг. - заместитель&nbsp;военного прокурора Подольского гарнизона;<br>
&nbsp;-&nbsp;2007-2009 гг. -&nbsp;руководитель&nbsp;военного следственного отдела Следственного комитета при прокуратуре РФ по Подольскому гарнизону Московского военного &nbsp;округа.<br>
 <br>
&nbsp;<i>Трудовая деятельность:</i><br>
 <br>
-&nbsp;2009-2015 гг. - Администрация&nbsp;города Подольска Московской области:<br>
&nbsp;- 2009 г. - начальник&nbsp;Правового управления;<br>
-&nbsp;2010&nbsp;г. - заместитель главы администрации – начальник&nbsp;Управления по правовым вопросам и обеспечению деятельности Администрации города Подольска;<br>
&nbsp;- 2011 г. - заместитель главы администрации по правовым вопросам и управлению муниципальной собственностью;<br>
- 2014 г. - заместитель главы администрации.<br>
- 2015 г. - Администрация города Серпухова Московской области.<br>
- май 2015 г. -&nbsp;и.&nbsp;о.&nbsp;Главы города Серпухова.<br>
- ноябрь 2015 - Глава города Серпухова.<br>
 <br>
 <i>Награды:</i><br>
 <br>
- медаль&nbsp;МО РФ «За отличие в военной службе» III степени;<br>
-&nbsp;медаль&nbsp;МО РФ «За отличие в военной службе» II степени;<br>
-&nbsp;медаль&nbsp;МО РФ «За воинскую доблесть» II степени;<br>
-&nbsp;медаль&nbsp;МО РФ «200 лет Министерству обороны»;<br>
-&nbsp;медалью МВД РФ «200 лет МВД России»;<br>
-&nbsp;знак&nbsp;отличия ГП РФ «За верность закону» III степени;<br>
-&nbsp;медаль&nbsp;МВД России «За содействие»;<br>
-&nbsp;знак&nbsp;Губернатора Московской области «За ратную службу»;<br>
-&nbsp;медаль&nbsp;«За заслуги в проведении Всероссийской переписи населения 2010 года»;<br>
-&nbsp;почетный&nbsp;знак&nbsp;города Подольска «Добро и милосердие»;<br>
-&nbsp;знак&nbsp;отличия «За заслуги перед городом Подольском» I степени;<br>
-&nbsp;Почетная&nbsp;грамота&nbsp;Министерства имущественных отношений Московской области.<br>
 <br>
 <i>Семейное положение:</i><br>
 <br>
Женат, воспитывает&nbsp;сына.<br>
</div>
<div style="display: none;" class="tab">
<p>
 <b>Кабинет:</b> № 220
</p>
<p>
 <b>Телефон:</b> 35-01-01
</p>
<p>
 <b>Приёмные дни:</b> Первый понедельник месяца с 15.00 до 18.00
</p>
<p>
 <b>Email:</b> <a href="mailto:dmitrzhar@yandex.ru">dmitrzhar@yandex.ru</a>
</p>
</div>
<!--<div class="wrapper-sov tab" style="display: none;">
<div class="item-sov minsa" style="display: none">
<div class="left-sov">
 <img alt="Акимова Елена Викторовна" src="/upload/iblock/546/Akimova.jpg" class="picture-sov" title="Акимова Елена Викторовна" height="256" width="200" border="0">
<div style="clear:both">
</div>
 <span class="name-sov">Акимова Елена Викторовна</span> <span class="post-sov">Советник Главы городского округа</span>
</div>
<div class="right-sov">
<p class="prop-sov">
 <span class="name-prop-sov">Кабинет:</span> <span class="val-prop-sov">№ 208</span>
</p>
<p class="prop-sov">
 <span class="name-prop-sov">Телефон:</span> <span class="val-prop-sov">39-52-38</span>
</p>
</div>
</div>
<div class="item-sov minsa">
<div class="left-sov">
 <img alt="Грачёв Владимир Николаевич" src="/upload/iblock/14b/Грачев.jpg" class="picture-sov" title="Грачёв Владимир Николаевич" height="259" width="202" border="0">
<div style="clear:both">
</div>
 <span class="name-sov">Грачёв Владимир Николаевич</span> <span class="post-sov">Советник Главы городского округа</span>
</div>
<div class="right-sov">
<p class="prop-sov">
 <span class="name-prop-sov">Кабинет:</span> <span class="val-prop-sov">№ 208</span>
</p>
<p class="prop-sov">
 <span class="name-prop-sov">Телефон:</span> <span class="val-prop-sov">39-52-38</span>
</p>
<p class="prop-sov">
 <span class="val-prop-sov"><br>
 </span>
</p>
                       </div>
                      </div>

</div>-->
<div style="display: none;" class="tab">
<div class="wrapper-sov">


<div class="news" style="padding: 0px 10px; box-sizing: border-box;">
<table width="100%">
  <tr>
    <th width="80%">
              Наименование закона
          </th>
    <th align="left">
              Документ для скачивания
          </th>
  </tr>
</table>
<br /></div>
 <!--<div class="item-sov minsa">
<div class="left-sov">
<div style="clear:both">
</div>
</div>
 <br>
</div>-->
</div>
</div>

[GeorG]

В шапку или подвал форума подключаете библиотеку jquery (если ещё не подключен). Например, в индексный шаблон темы по умолчанию ../Themes/default/index.template.php между тег head:

Код Выделить Развернуть

<script type="text/javascript"><!-- // --><![CDATA[
 window.jQuery || document.write(unescape(\'%3Cscript src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"%3E%3C/script%3E\'));
 // ]]></script>
Ниже вставляете скрипт переключения вкладок (не мудрствуя лукаво, взял его со страницы примера что вы давали выше):

Код Выделить Развернуть

<script>
jQuery(document).ready(function ($) {
   $(\'.tabs li\').click(function(){
 $(this).parent(\'ul\').find(\'li\').removeClass(\'active\'); $(this).addClass(\'active\')
 $(this).parents(\'.tabs\').find(\'.tab\').hide(0).eq($(this).index()).show(0)
 })

});
</script>
После этого вкладки должны работать.

[vladimir]

Ребята. И первый способ пробовал не выходит со вторым тоже не получается....Что то я глуплю или не там сделал...Возможно как то через код посмотреть, подключена библиотека или нет? Cайт serp-forum.ru

[GeorG]

Возможно как то через код посмотреть, подключена библиотека или нет?

Можно через фаербаг смотреть, у вас не подключена сейчас библиотека.