Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы » Как добавит sessionStorage к табам?

Как добавит sessionStorage к табам?

ushkom 07.10.2020 sessionStorage, табы Общие вопросы, jQuery 762

вопрос

Доброго времени суток, подскажите пожалуйста знающие, как добавит sessionStorage к скрипту табов-вкладок? Нужно запоминать активную вкладку при перезагрузки страницы.

Сам скрипт табов:

Показать / Скрыть текст

$(function() {
	var tab = $('#tabs .tabs-items > div'); 
	tab.hide().filter(':first').show(); 
	
	// Клики по вкладкам.
	$('#tabs .tabs-nav a').click(function(){
		tab.hide(); 
		tab.filter(this.hash).show(); 
		$('#tabs .tabs-nav a').removeClass('active');
		$(this).addClass('active');
		$.getScript({
			url: "//povarenok.online/templates/povarenok/js/moreContent.js",
			cache: true
		})
		return false;
	}).filter(':first').click();
 
	// Клики по якорным ссылкам.
	$('.tabs-target').click(function(){
		$('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
	});
});

Сама разметка:

Показать / Скрыть текст


<div id="tabs">
	<!-- Кнопки -->
	<ul class="tabs-nav">
		<li><a href="#tab-1">Вкладка №1</a></li>
		<li><a href="#tab-2">Вкладка №2</a></li>
		<li><a href="#tab-3">Вкладка №3</a></li>
	</ul>	
	
	<!-- Контент -->
	<div class="tabs-items">
		<div class="tabs-item" id="tab-1">
			<strong>Текст вкладки №1</strong>
		</div>
		<div class="tabs-item" id="tab-2">
			<strong>Текст вкладки №2</strong>
		</div>
		<div class="tabs-item" id="tab-3">
			<strong>Текст вкладки №3</strong>
		</div>		
	</div>
</div>

Заранее спасибо за помощь.

Ответа пока нет

8 комментариев

Юзер

110

akella - 2018-12-058 октября 2020 05:54 - #77977

$(function() {
        var tab = $('#tabs .tabs-items > div');
        tab.hide();
        var a = sessionStorage['activetab'];
        if (!a) {
            a = ':first'
        };
        tab.filter(a).show();

        // Клики по вкладкам.
        $('#tabs .tabs-nav a').click(function() {
            sessionStorage['activetab'] = this.hash;
            tab.hide();
            tab.filter(this.hash).show();
            $('#tabs .tabs-nav a').removeClass('active');
            $(this).addClass('active');
            $.getScript({
			url: "//povarenok.online/templates/povarenok/js/moreContent.js",
			cache: true
		});
            return false;
        }).filter(a).click();

        // Клики по якорным ссылкам.
        $('.tabs-target').click(function() {
            $('#tabs .tabs-nav a[href=' + $(this).data('id') + ']').click();
        });
    });

Юзер

167

ushkom - 2018-12-058 октября 2020 11:50 - #77978

Большое спасибо, скрипт частично работает. При перезагрузки сохраняется открытый ранее таб, но сама кнопка открытого таба не активна, что нужно подправить чтоб к а присвоить класс class="active"?

Юзер

110

akella - 2018-12-058 октября 2020 14:20 - #77982

попробуйте так

if (!a) {
            a = ':first'
        } else {
            $('a[href=' + a + ']').addClass('active')
        }

Юзер

167

ushkom - 2018-12-058 октября 2020 16:27 - #77983

К сожалению так в обще не корректно работает.

Юзер

110

akella - 2018-12-058 октября 2020 20:05 - #77992

if (!a) {a=':first';
        var el = document.querySelector('a[href="#tab-1"]');
        el.classList.add("active");}else {var el = document.querySelector('a[href="'+a+'"]'); 
el.classList.add("active");}

в предыдущем комментарии кавычки пропустил

if (!a) {
            a = ':first'
        } else {
            $('a[href="' + a + '"]').addClass('active')
        }

Юзер

167

ushkom - 2018-12-058 октября 2020 20:11 - #77994

Да, все супер, работает как часики. Спасибо Вам большое

Юзер

167

ushkom - 2018-12-058 октября 2020 23:29 - #77995

Хотя нет, наверное после перезагрузки браузера, скрипт не работает а консоль выдает

Uncaught TypeError: Cannot read property 'classList' of null

Получается не обнуляет сессию.

Юзер

167

ushkom - 2018-12-058 октября 2020 23:34 - #77996

Да, так работает и после перезагрузки

if (!a) {
            a = ':first'
        } else {
            $('a[href="' + a + '"]').addClass('active')
        }

Похожие вопросы

Как Добавить Или Изменить Эффект Слайдера ???

20.03.2014 vip.boss Общие вопросы

Как сделать автоматическое переключение изображения слайдера ???

15.04.2014 vip.boss Общие вопросы

Нужно переоформить из списка в последовательные блоки

20.04.2014 Miracle Общие вопросы

Куки

12.06.2014 never3d222 Общие вопросы

Как сделать для видео плеера, такую же шкуру?

15.06.2014 Е.Хрущёв Общие вопросы

Как сделать подрузку новостей из других вкладок Navs Bootstrap в AJAX?

05.12.2018 progressive Общие вопросы, jQuery, Хаки

Последние события

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
Вчера, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 13:52

где выводить? админка или сайт
TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
21-11-2024, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб

наверх