Как по ссылке перейти на нужную вкладку?
Здравствуйте!
На одной странице есть ссылки на проекты. На второй странице есть описание проектов в виде закладок (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 );
|
Цитата:
|
Цитата:
|
Цитата:
<!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 Посмотри на результат... ;) |
ksa, в моей конструкции такой вариант почему-то не работает :(
А можно ли как-то ссылкой с главной страницы передать дополнительный клик по вкладке li с определенным id ? |
ksa, Всё, разобрался, буду всё переделывать без js, спасибо! Про :target не знал, так намного проще и удобнее!:victory:
|
Цитата:
Не всегда можно применять такой подход, поскольку это еще связано с фокусированием на :target элемент... А это не всегда нужно. |
| Часовой пояс GMT +3, время: 18:12. |