Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2015, 13:36
Новичок на форуме
Отправить личное сообщение для ye1low Посмотреть профиль Найти все сообщения от ye1low
 
Регистрация: 22.04.2015
Сообщений: 3

Как по ссылке перейти на нужную вкладку?
Здравствуйте!
На одной странице есть ссылки на проекты. На второй странице есть описание проектов в виде закладок (tabs).
Как сделать так, чтобы при переходе по ссылке открывалась нужная вкладка с проектом.

На главной странице:
<div class="nav">
                        <a class="list-group-item" href="projects.html">Проект 1</a>
                        <a class="list-group-item" href="projects.html">Проект 2</a>
                        <a class="list-group-item" href="projects.html">Проект 3</a>
</div>


Вкладки на projects.html:

<div id="tabs" class="tabs">
                        <nav>
                            <ul>
                                <li><a href="#section-1"><span>Проект 1</span></a></li>
                                <li><a href="#section-2"><span>Проект 2</span></a></li>
                                <li><a href="#section-3"><span>Проект 3</span></a></li>
</ul>
</nav>

<div class="content">
<section id="section-1">
<div class="mediabox">
Текст проекта 1
</div>
</section>
<section id="section-2">
<div class="mediabox">
Текст проекта 2
</div>
</section>
<section id="section-3">
<div class="mediabox">
Текст проекта 3
</div>
</section>
</div>


Указание в ссылке на главной href="projects.html#section-2" не помогает, всё равно открывается 1-я вкладка

За работу вкладок отвечает скрипт (см. внизу)
В его коде есть такое объявление:

CBPFWTabs.prototype.options = {

		start : 0

	};


Как мне передать номер вкладки параметру start при нажатии на ссылку на Главной странице?

PS: В конце страницы с проектами встроен скрипт:

<script src="js/cbpFWTabs.js"></script>
            <script>
            new CBPFWTabs(document.getElementById('tabs'));
            </script>


А вот сам скрипт вкладок:

;( function( window ) {
	
	'use strict';


	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function CBPFWTabs( el, options ) {
		this.el = el;
		this.options = extend( {}, this.options );
  		extend( this.options, options );
  		this._init();
	}

	CBPFWTabs.prototype.options = {

		start : 0

	};

	CBPFWTabs.prototype._init = function() {
		// tabs elemes
		this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
		// content items
		this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) );
		// current index
		this.current = -1;
		// show current content item
		this._show();
		// init events
		this._initEvents();
	};

	CBPFWTabs.prototype._initEvents = function() {
		var self = this;
		this.tabs.forEach( function( tab, idx ) {
			tab.addEventListener( 'click', function( ev ) {
				ev.preventDefault();
				self._show( idx );
			} );
		} );
	};

	CBPFWTabs.prototype._show = function( idx ) {
		if( this.current >= 0 ) {
			this.tabs[ this.current ].className = '';
			this.items[ this.current ].className = '';
		}
		// change current
		this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
		this.tabs[ this.current ].className = 'tab-current';
		this.items[ this.current ].className = 'content-current';
		
	};

	

	// add to global namespace
	window.CBPFWTabs = CBPFWTabs;



})( window );
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2015, 13:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от ye1low
Как сделать так, чтобы при переходе по ссылке открывалась нужная вкладка с проектом.
Поменять вызов на первой странице... Поменять вторую страницу, дабы она могла реагировать на "новый" вариант ее вызова.
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2015, 13:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от ye1low
Указание в ссылке на главной href="projects.html#section-2" не помогает, всё равно открывается 1-я вкладка
Если на такой вызов нет реакции на самой странице - ничего и не поменяется.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2015, 13:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от ye1low
Указание в ссылке на главной href="projects.html#section-2" не помогает, всё равно открывается 1-я вкладка
Для примера...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
li {
	display: none;
}
li:target {
	display: block;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul>
	<li id='one'>One</li>
	<li id='two'>Two</li>
</ul>
</body>
</html>

Вызови эту страничку
<url>#one
и
<url>#two

Посмотри на результат...
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2015, 15:23
Новичок на форуме
Отправить личное сообщение для ye1low Посмотреть профиль Найти все сообщения от ye1low
 
Регистрация: 22.04.2015
Сообщений: 3

ksa, в моей конструкции такой вариант почему-то не работает

А можно ли как-то ссылкой с главной страницы передать дополнительный клик по вкладке li с определенным id ?
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2015, 16:18
Новичок на форуме
Отправить личное сообщение для ye1low Посмотреть профиль Найти все сообщения от ye1low
 
Регистрация: 22.04.2015
Сообщений: 3

ksa, Всё, разобрался, буду всё переделывать без js, спасибо! Про :target не знал, так намного проще и удобнее!
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2015, 09:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от ye1low
Про :target не знал, так намного проще и удобнее!
Там не так все радужно...
Не всегда можно применять такой подход, поскольку это еще связано с фокусированием на :target элемент... А это не всегда нужно.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как закрыть текущую вкладку браузера? Nicko Общие вопросы Javascript 6 14.06.2016 20:58
Как закрыть вкладку? JusteG AJAX и COMET 5 23.07.2014 20:57
Как сделать вкладку с 'плюсами и минусами'??? Monopolist Элементы интерфейса 2 05.08.2009 14:07
Как сделать чтобы картинка не открывалась по ссылке а скачивалась test Общие вопросы Javascript 4 20.06.2009 08:35
Help ! Как загрузить данные по ссылке из таблицы1 в таблицу2 ? asked86 Общие вопросы Javascript 1 25.03.2009 21:06