Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2014, 15:08
Новичок на форуме
Отправить личное сообщение для papacoca Посмотреть профиль Найти все сообщения от papacoca
 
Регистрация: 06.08.2014
Сообщений: 9

Переход по ссылке с якорем + активирация соответствующего таба.
Переход по ссылке с якорем + *активация соответствующего таба.
Получилось реализовать только с 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>

Последний раз редактировалось papacoca, 01.10.2014 в 15:37. Причина: Ошибка в заголовке
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2014, 12:17
Аватар для Duda.Ml1986@gmail.com
Профессор
Отправить личное сообщение для Duda.Ml1986@gmail.com Посмотреть профиль Найти все сообщения от Duda.Ml1986@gmail.com
 
Регистрация: 01.09.2011
Сообщений: 263

А можешь сказать что должно произойти по клику по анкорной ссылке?
Русским языком, например клик поссылке открывает таб такой то.
Как идентифицируется относительно какой ссылки открывается таб? Тоесть что в ссылке указывает на соответствующий таб?

Например.

Ссылка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 +"]').ПОКАЗАТЬ_СОДЕРЖИМОЕ_СЛАЙДА();

})

Последний раз редактировалось Duda.Ml1986@gmail.com, 02.10.2014 в 12:34.
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2014, 10:53
Новичок на форуме
Отправить личное сообщение для papacoca Посмотреть профиль Найти все сообщения от papacoca
 
Регистрация: 06.08.2014
Сообщений: 9

Нужно по ссылке <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>

Последний раз редактировалось papacoca, 03.10.2014 в 12:22. Причина: Упростил
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2014, 18:37
Новичок на форуме
Отправить личное сообщение для papacoca Посмотреть профиль Найти все сообщения от papacoca
 
Регистрация: 06.08.2014
Сообщений: 9

Duda.Ml1986@gmail.com

Не активируется таб

Пробовал и так:
$('ul.option-set li a[data-option-value-for-select="+ selector_for_tab +"]').ПОКАЗАТЬ_СОДЕРЖИМОЕ_СЛАЙДА();


Тут тестирую: http://help-windows.net/table5.html

Последний раз редактировалось papacoca, 03.10.2014 в 18:43. Причина: :(
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2014, 18:44
Новичок на форуме
Отправить личное сообщение для papacoca Посмотреть профиль Найти все сообщения от papacoca
 
Регистрация: 06.08.2014
Сообщений: 9

Duda.Ml1986@gmail.com,
Помоги плз
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2014, 12:10
Аватар для Duda.Ml1986@gmail.com
Профессор
Отправить личное сообщение для Duda.Ml1986@gmail.com Посмотреть профиль Найти все сообщения от Duda.Ml1986@gmail.com
 
Регистрация: 01.09.2011
Сообщений: 263

Как любят тут говорить, тебе в раздел работа.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
По клику на картинку с ссылкой открывается портфолио, а нужен переход по ссылке nitoiti Общие вопросы Javascript 7 08.09.2014 14:39
Вырубить переход по ссылке mycoding Общие вопросы Javascript 11 05.11.2010 22:44
переход по ссылке через N секунд jerryfish Events/DOM/Window 4 23.02.2010 17:05
переход по ссылке только после нескольких кликов по ней smilexpo Events/DOM/Window 8 24.11.2009 16:57
Переход по ссылке Raynor jQuery 1 07.04.2009 22:52