Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/15: Рейтинг темы: голосов - 15, средняя оценка - 4.80
rmn
0 / 0 / 0
Регистрация: 14.05.2012
Сообщений: 35
1

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

27.10.2014, 18:09. Просмотров 2978. Ответов 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
Ответы с готовыми решениями:

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

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

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

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

Как исправить работу chrome.tabs.remove?
Доброго времени суток. Имеется расширение, которое было допилинно под свои...

4
ludmila-sv
276 / 276 / 62
Регистрация: 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 / 62
Регистрация: 28.08.2014
Сообщений: 432
28.10.2014, 13:11 4
Лучший ответ Сообщение было отмечено rmn как решение

Решение

Переходим по такой ссылке: 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

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

Как перейти на определенную вкладку?
У меня на форме имеется елемент с вкладками. Как программно перейти на ту или...

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


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

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

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