Переход по ссылке с якорем + активирация соответствующего таба.
Переход по ссылке с якорем + *активация соответствующего таба.
Получилось реализовать только с 2-ым блоком, чтобы перелистывать вкладки блока по метке: http://help-windows.net/test.html С 1 блоком невыходит:(( <!-- ========== КОД 2 БЛОКА (вышло) ========== --> <script> (function($) { $(function() { $('ul.tabs').on('click', 'li:not(.current)', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide(); }) var tabIndex = window.location.hash.replace('#tab','')-1; if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click(); $('a[href*=#tab]').click(function() { var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1; $('ul.tabs li').eq(tabIndex).click(); }); }) })(jQuery) </script> <a href="#tab1" onClick="document.location.href= '#metka4'">ПЕРЕХОД ПО 1 МЕТКЕ</a> <a href="#tab2" onClick="document.location.href= '#metka5'">ПЕРЕХОД ПО 2 МЕТКЕ </a> <div id="tabbed-nav"> <ul class="tabs"> <li><a name="metka4">Удаленная компьютерная помощь</a></li> <li><a name="metka5">Установка Windows</a></li> <li><a>Установка антивируса, удаление вирусов</a></li> <li><a>Восстановление данных</a></li> <li><a>Сборка компьютеров</span></a></li> <li><a>Установка, настройка Wi-Fi</span></a></li> </ul> .... <!-- ========== КОД 1 БЛОКА (невыходит) ========== --> <script> (function($) { $(function() { $('ul.option-set clearfix').on('click', 'li:not(.current)', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tytevonebilo').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide(); }) var tabIndex = window.location.hash.replace('#taboo','')-1; if (tabIndex != -1) $('ul.option-set clearfix li').eq(tabIndex).click(); $('a[href*=#taboo]').click(function() { var tabIndex = $(this).attr('href').replace(/(.*)#taboo/, '')-1; $('ul.option-set clearfix li').eq(tabIndex).click(); }); }) })(jQuery) </script> <a href="#taboo1" onClick="document.location.href= '#metka1'">ПЕРЕХОД ПО 1 МЕТКЕ</a> <a href="#taboo2" onClick="document.location.href= '#metka2'">ПЕРЕХОД ПО 2 МЕТКЕ </a> <div class="tytevonebilo"> <section id="options" class="clearfix"> <ul id="filters" class="option-set clearfix" data-option-key="filter"> <li><a href="#filter" data-option-value=".vse" class="selected boxShadow4 b1">Информация о компании и предоставляемых услугах</a></li> <li><a href="#filter" data-option-value=".virus" class="boxShadow4 b25" name="metka1">Установка антивируса, <br />удаление вирусов</a></li> <li><a href="#filter" data-option-value=".windows" class="boxShadow4 b25 b10">Установка Windows</a></li> <li><a href="#filter" data-option-value=".design" class="boxShadow4 b25" name="metka2">Удаленная (онлайн) <br />компьютерная помощь</a></li> <li><a href="#filter" data-option-value=".usl3" class="boxShadow4 b25">Установка, настройка Wi-Fi</a></li> <li><a href="#filter" data-option-value=".art" class="boxShadow4 b25">Сборка компьютеров</a></li> <li><a href="#filter" data-option-value=".vostan" class="boxShadow4 b25">Восстановление данных</a></li> </ul> </section> </div> |
А можешь сказать что должно произойти по клику по анкорной ссылке?
Русским языком, например клик поссылке открывает таб такой то. Как идентифицируется относительно какой ссылки открывается таб? Тоесть что в ссылке указывает на соответствующий таб? Например. Ссылка1 (в ней аттрибут #1) Ссылка2 (в ней аттрибут #2) таб1 (в нем аттрибут #1) таб2 (в нем аттрибут #2) 1. Клик по ссылке( достаешь значение аттрибута) 2. выбираешь таб с таким же аттрибутом 3. показываешь таб. <a href="#tab1" someattr="tab1">ПЕРЕХОД ПО 1 МЕТКЕ</a> <ul id="filters" class="option-set clearfix" data-option-key="filter"> 60 <li><a href="#filter" data-option-value=".vse" data-option-value-for-select="tab1" class="selected boxShadow4 b1">Информация о компании и предоставляемых услугах</a></li> </ul> $('a').on('click', function(e){ // остановка всплытия события e.preventDefault(); e.stopPropagation(); // Достаешь значение аттрибута selector_for_tab = this.attr('someattr') // тут вытаскиваешь нужный таб и активируешь отображение его содержимое. $('#filters li a[data-option-value-for-select="+ selector_for_tab +"]').ПОКАЗАТЬ_СОДЕРЖИМОЕ_СЛАЙДА(); }) |
Нужно по ссылке <a href="#taboo1"> активировать (кликнуть) 1-ый таб (вкладку),
<a href="#taboo2"> активировать 2-ой таб, <a href="#taboo3"> активировать 3-ий таб, И так 7-мь табов . Упростил: <script> (function($) { $(function() { $('a[href*=#taboo]').click(function() { var tabIndex = $(this).attr('href').replace(/(.*)#taboo/, '')-1; $('ul.option-set li').eq(tabIndex).click(); }); }) })(jQuery) </script> <!-- Ссылки --> <a href="#taboo1">АКТИВИРОВАТЬ 1 ТАБ</a> <a href="#taboo2">АКТИВИРОВАТЬ 2 ТАБ </a> <!-- 7-мь табов --> <section id="options" class="clearfix"> <ul id="filters" class="option-set" data-option-key="filter"> <li><a href="#filter" data-option-value=".vse" class="selected boxShadow4 b1">1-ый ТАБ</a></li> <li><a href="#filter" data-option-value=".virus" class="boxShadow4 b25">2-ой ТАБ</a></li> <li><a href="#filter" data-option-value=".windows" class="boxShadow4 b25 b10">3-ий ТАБ</a></li> <li><a href="#filter" data-option-value=".design" class="boxShadow4 b25">4-ый ТАБ</a></li> <li><a href="#filter" data-option-value=".usl3" class="boxShadow4 b25">5-ый ТАБ</a></li> <li><a href="#filter" data-option-value=".art" class="boxShadow4 b25">6-ой ТАБ</a></li> <li><a href="#filter" data-option-value=".vostan" class="boxShadow4 b25">7-ой ТАБ</a></li> </ul> </section> |
Duda.Ml1986@gmail.com
Не активируется таб :( Пробовал и так: $('ul.option-set li a[data-option-value-for-select="+ selector_for_tab +"]').ПОКАЗАТЬ_СОДЕРЖИМОЕ_СЛАЙДА(); Тут тестирую: http://help-windows.net/table5.html |
Duda.Ml1986@gmail.com,
Помоги плз |
Как любят тут говорить, тебе в раздел работа.
|
Часовой пояс GMT +3, время: 10:22. |