Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
0 / 0 / 0
Регистрация: 12.09.2015
Сообщений: 16

Вкладки (Табы) с запоминанием

23.03.2016, 16:50. Показов 3205. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброе время суток, уважаемые программисты.
Вопрос такой после перезагрузки страницы нужно чтобы вкладка была активной т.е. id="current" так у которой внутри совпадает ссылка с адресом
код страницы такой
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="nav">
<ul class="gnav">
  <li><a href="#" title="tab1">75 лет начала ВОВ</a></li>
  <li><a href="#" title="tab2">О городе</a></li>
</ul>
 
<div class="subnav">
  <div id="tab1">
     <ul>
       <li><a href="/node/301">Земляки в боях за Родину</a></li>
       <li><a href="/book-exhibitions">Книжные выставки</a></li>
      </ul>
   </div>
 
  <div id="tab2">
      <ul>
       <li><a href="/node/254">Краевое исследование «Книга как память о войне»</a></li>
       <li><a href="/node/260">Методическая копилка</a></li>
      </ul>
  </div>
</div>
</div>
скрипт
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
(function($) {
$(document).ready(function() {
  
 $(".subnav div").hide(); // Скрываем содержание
 $(".gnav li:first").attr("id","current"); // Активируем первую закладку
 $(".subnav div:first").fadeIn(); // Выводим содержание
   
  $('.gnav a').click(function(e) {
  e.preventDefault();  
  $(".subnav div").hide(); //Скрыть все содержание
  $(".gnav li").attr("id",""); //Сброс ID
  $(this).parent().attr("id","current"); // Активируем закладку
  $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
  });
    
$('.subnav a').each(function () { // проходим по нужным нам ссылками
var location = window.location.href; // переменная с адресом страницы
var link = this.href; // переменная с url ссылки
var result = location.match(link); // результат возвращает объект если совпадение найдено и null при обратном
 
if(result != null) { // если НЕ равно null
$('.subnav a:first').removeClass('here'); // сначала удаляем класс с индексной страницы
$(this).addClass('here'); // добавляем класс
}
});
   
})();
 } ) (jQuery);
вот как сделать чтобы активировал вкладку где есть <a class="here"... ???
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
23.03.2016, 16:50
Ответы с готовыми решениями:

вкладки (табы) передать значение родителю
Доброе время суток, уважаемые программисты есть вот такая структура вкладок в содержимом которых есть ссылки на разные страницы сайта ...

Section в IE9, вкладки(табы)
Пол дня ищу проблему, не могу понять, помогите( &lt;div class=&quot;formStudProf&quot;&gt; &lt;div class=&quot;profileActivity&quot;&gt; ...

Вкладки (табы). Раскрывающийся текст под табами при клике
Здравствуйте, есть вкладки, помогите допилить функционал пожалуйста. Нужно, чтобы под каждой раскрывающейся вкладкой появлялся текст,...

7
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
23.03.2016, 21:28
посредством куки. подойдет?
0
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
23.03.2016, 22:49
Я бы сделал так - у ссылок прописал бы атрибут, например data-pages значение которого содержало бы id блока с нужным содержимым. При загрузке страницы получаем адрес, находим по адресу ссылку, смотрим что в data-pages и показываем. Пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="tab1">
     <ul>
       <li><a href="/node/301" data-pages="content1">Земляки в боях за Родину</a></li>
       <li><a href="/book-exhibitions" data-pages="content2">Книжные выставки</a></li>
      </ul>
   </div>
 
  <div id="tab2">
      <ul>
       <li><a href="/node/254" data-pages="content3">Краевое исследование «Книга как память о войне»</a></li>
       <li><a href="/node/260" data-pages="content4">Методическая копилка</a></li>
      </ul>
  </div>
Скрипт:

JavaScript
1
2
3
4
5
6
  var location = window.location.pathname;
  
  if ( $("a[href^='"+location+"']").is(':visible') ) {
    var page = $("a[href^='"+location+"']").data('page');
    $('.'+page).css('display', 'block');
  };
Пример - http://codepen.io/AmateR/pen/VabrKB
Дебаг - http://s.codepen.io/AmateR/debug/VabrKB


Кстати, мне кажется что у вас в коде $(document).ready(function() {}); не нужно
1
0 / 0 / 0
Регистрация: 12.09.2015
Сообщений: 16
24.03.2016, 00:46  [ТС]
Нет по средством куки не подойдет, по идеи должно быть так
если у ссылки есть класс here то класс у родителя будет current

JavaScript
1
2
3
4
5
6
7
8
$('.subnav a').each(function () { // проходим по нужным нам ссылками
var firstclass = this.class;// переменная с классом here
if (firstclass == here) {
  $(".subnav div").hide(); //Скрыть все содержание
  $(".gnav li").attr("id",""); //Сброс ID
  $(this).parent().attr("id","current"); // Активируем закладку
  $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
}
это конечно не работает
0
0 / 0 / 0
Регистрация: 12.09.2015
Сообщений: 16
24.03.2016, 14:02  [ТС]
вот так примерно должно быть
Миниатюры
Вкладки (Табы) с запоминанием  
0
0 / 0 / 0
Регистрация: 12.09.2015
Сообщений: 16
24.03.2016, 18:12  [ТС]
JavaScript
1
2
3
4
5
6
  var location = window.location.pathname;
  
  if ( $("a[href^='"+location+"']").is(':visible') ) {
    var page = $("a[href^='"+location+"']").data('page');
    $('.'+page).css('display', 'block');
  };
а можно по подробнее как это осуществить, а то что то не пойму куда этот код вставить? и если ссылки нет то должна выделятся первая вкладка
0
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
24.03.2016, 19:10
Цитата Сообщение от SEMEon85 Посмотреть сообщение
а можно по подробнее как это осуществить, а то что то не пойму куда этот код вставить? и если ссылки нет то должна выделятся первая вкладка
А что именно не понятно?)) Про атрибут data-* понятно?

Код вставлять в

JavaScript
1
2
3
4
5
(function($) {
 
...
 
})(jQuery);
Как выглядит код того, что будет отображаться при выделении вкладок? По вашему коду что то непонятно ни чего

JavaScript
1
$(".subnav div").hide(); //Скрыть все содержание
Вот тут вы что скрываете? Все вкладки? Ерунда какая то...
По моим ссылкам переходили? Смотрели как там реализовал? Немного подправил чтобы показывалась первая вкладка по умолчанию
http://codepen.io/AmateR/pen/VabrKB
0
0 / 0 / 0
Регистрация: 12.09.2015
Сообщений: 16
26.03.2016, 03:29  [ТС]
сделал так, может кому пригодится
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="nav">
<ul class="gnav">
  <li><a href="#">75 лет начала ВОВ</a>
    <ul>
                                <li><a href="/node/301">Земляки в боях за Родину</a>
                                <li><a href="/book-exhibitions">Книжные выставки</a>
                                <li><a href="/node/254">Краевое исследование «Книга как память о войне»</a>
    </ul>
  <li><a href="#">Библиотеки</a>
    <ul>
                                <li><a href="/node/260">Методическая копилка</a>
                                <li><a href="/node/255">Новая литература о войне</a>
                                <li><a href="/node/259">План мероприятий</a>
    </ul>
</ul>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function($){ 
 
    $(document).ready(function(){
        var pathname = window.location.pathname
            var page = pathname.split().pop()
        var menuItems = $('.gnav a');
        menuItems.each(function(){
            var mi = $(this)
                var miHrefs = mi.attr("href")
                var miParents = mi.parents('li');
            if(page == miHrefs) {
                miParents.addClass("active").siblings().removeClass('active');
            }
        });
    });
 
})(jQuery);
на родителя и ссылку добавляется класс active
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.03.2016, 03:29
Помогаю со студенческими работами здесь

Меню с запоминанием
Есть меню вида: &lt;div class=&quot;sidebarmenu&quot;&gt; &lt;ul id=&quot;sidebarmenu1&quot;&gt; &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Гловна&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a...

Меню с запоминанием ......
Есть меню без запоминания: &lt;div class=&quot;sidebarmenu&quot;&gt; &lt;ul id=&quot;sidebarmenu1&quot;&gt; &lt;li&gt;&lt;a...

Аутентификация на сайте с запоминанием
асп простой, не дотнетовский! Логиницца пользователь, а ему галочку надо поставить - чтобы при повторном заходи меня пускал без логина...

мультипликация с запоминанием части экрана
получить на экране человечка и оживить его. например пусть он ходит

Автономный кликер с запоминанием состояния
Возможно ли создать расширение для браузера на VDS, которое будет выполнять, так скажем, фунцкии кликера (переходить по страничкам и...


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Вывод данных через динамический список в справочнике
Maks 01.04.2026
Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru