Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 10, средняя оценка - 4.70
rmn
0 / 0 / 0
Регистрация: 14.05.2012
Сообщений: 35
#1

Как по ссылке перейти на нужную вкладку (tabs)? - JavaScript

27.10.2014, 18:09. Просмотров 2411. Ответов 4
Метки нет (Все метки)

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

На главной (index.html):
HTML5
1
2
3
4
5
6
7
8
9
10
<div>
               <nav>
                     <ul>
                            
                          <li><a href="projects.html"><span>Проект 1</span></a></li>
                          <li><a href="projects.html"><span>Проект 2</span></a></li>
                          <li><a href="projects.html"><span>Проект 3</span></a></li>
                     </ul>
               </nav>
            </div>
Вкладки (projects.html):
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section>
                <div class="tabs tabs-style-line">
                    <nav>
                        <ul>
                            
                            <li><a href="#section-line-1"><span>Проект 1</span></a></li>
                            <li><a href="#section-line-2"><span>Проект 2</span></a></li>
                            <li><a href="#section-line-3"><span>Проект 3</span></a></li>
                        </ul>
                    </nav>
                    
                    <div class="content-wrap">
                        <section id="section-line-1">
                            текст для вкладки 1
                        </section>
                        
                        <section id="section-line-2">
                            текст для вкладки 2
                        </section>
                        
                        <section id="section-line-3">
                            текст для вкладки 3
                        </section>
                        
                    </div><!-- /content -->
                </div><!-- /tabs -->
            </section>
Добавлено через 1 час 2 минуты
За работу вкладок отвечает скрипт (см. внизу)
В его коде есть такое объявление:

Javascript
1
2
3
CBPFWTabs.prototype.options = { 
          start : 0        // номер вкладки
};
Как мне передать номер вкладки параметру start при нажатии на ссылку на Главной странице???

PS: На странице с вкладками встроен скрипт с параметрами для вкладок:
Javascript
1
2
3
4
5
6
7
8
9
<script>
            (function() {
 
                [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
                    new CBPFWTabs( el );
                });
 
            })();
        </script>
А сам скрипт вкладок:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
( 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 elems
        this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
        // content items
        this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > 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 );
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.10.2014, 18:09
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Как по ссылке перейти на нужную вкладку (tabs)? (JavaScript):

Как перейти по ссылке внутрь таба? - JavaScript
Всем привет! Хотел бы на страницу поставить &quot;аккордеон&quot;, внутри каждой вкладки будет текст с картинками. Похоже, что есть...

Как с помощью VBScript и/или JavaScript перейти на нужную закладку в Word'е и напечатать там текст? - JavaScript
Подскажите кто-нибудь, кака с помощью VBScript и/или JavaScript перейти на нужную закладку в Word'е и напечатать там текст. Спасибо.

Как перехватить событие клика на ссылке и перейти на другую страницу? - JavaScript
Всем привет. Нужно перехватить всплывающее событие клика на теге a, и перейти не по ссылке, а по другому адресу. Вот примет: &lt;html&gt; ...

Перейти по ссылке по второму нажатию - JavaScript
Возможно ли сделать так, чтобы переходил по ссылке по второму нажатию?

Chrome Extention Как исправить работу chrome.tabs.remove? - JavaScript
Доброго времени суток. Имеется расширение, которое было допилинно под свои нужды. Расширение умеет закрывать вкладки, если их более...

Как программно перейти на нужную вкладку TabControl - Visual Basic .NET
Имеется форма NewSel c TabControl-ом Pf и вкладками P1 и P2. Необходимо в произвольной процедуре, которая вызывается например из...

4
ludmila-sv
276 / 276 / 50
Регистрация: 28.08.2014
Сообщений: 432
27.10.2014, 20:08 #2
А сами ссылки разве нельзя делать так:
HTML5
1
<a href="projects.html#section-line-1"><span>Проект 1</span></a>
Добавлено через 2 минуты
Цитата Сообщение от rmn Посмотреть сообщение
Как мне передать номер вкладки параметру start при нажатии на ссылку на Главной странице???
Если делать ссылки как указано выше, номер вкладки можно получить из location.
1
rmn
0 / 0 / 0
Регистрация: 14.05.2012
Сообщений: 35
28.10.2014, 12:40  [ТС] #3
Нет, используя
HTML5
1
<a href="projects.html#section-line-1"><span>Проект 1</span></a>
переходит на 1ю вкладку.

Добавлено через 6 минут
Как я понимаю, при переходе по каждой ссылке надо чтобы в скрипт передавался параметр start
Javascript
1
2
3
CBPFWTabs.prototype.options = { 
          start : 0        // номер вкладки
};
Но я не знаю как это реализовать. Ведь при нажатии на ссылку страница обновится и параметр не задастся.
0
ludmila-sv
276 / 276 / 50
Регистрация: 28.08.2014
Сообщений: 432
28.10.2014, 13:11 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Переходим по такой ссылке: href="projects.html#section-line-1" ... Можно даже для простоты вот так писать
href="projects.html#1". На странице projects.html у нас в адресной строке будет полный адрес и в конце #1
Получаем номер вкладки из адресной строки
Javascript
1
2
var tab = window.location.hash; // получим #1
tab = tab.replace("#", ""); // удаляем символ #, остается номер вкладки
2
guiseppe
0 / 0 / 0
Регистрация: 17.04.2015
Сообщений: 2
17.04.2015, 17:34 #5
ludmila-sv, подскажите, пожалуйста, новичку. Куда необходимо вставить этот код? Я в JS полный 0
Javascript
1
2
var tab = window.location.hash; // получим #1
tab = tab.replace("#", ""); // удаляем символ #, остается номер вкладки
0
17.04.2015, 17:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.04.2015, 17:34
Привет! Вот еще темы с ответами:

Как перейти на определенную вкладку? - MS Access
У меня на форме имеется елемент с вкладками. Как программно перейти на ту или иную вкладку? Попробовал MyTabs.TabIndex = 2. Не получается.

Как в TabStrip программно перейти на другую вкладку? - VB
Можете ли Вы подсказать такую вещь: как в TabStrip программно перейти на другую вкладку, например на вторую?

Как перейти на нужную запись грида? - VB
Как перейти на нужную запись грида. Я удалаю запись из грида и после удаления хочу, что бы выделилась последующая после удаления строка.

Как перейти на нужную запись FlexGrid? - VB
Есть flexgrid id fam 1 Иванов 2 Петров 3 Сидоров Как програмно по id вставать на нужную запись. Например по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru