Как по ссылке перейти на нужную вкладку?
Здравствуйте!
На одной странице есть ссылки на проекты. На второй странице есть описание проектов в виде закладок (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, время: 23:40. |