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

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

23.03.2016, 16:50. Показов 3172. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru