Правильный адрес URL в закладках

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

Все просто, если закладки расположены по разным URL. Тогда в HTML коде для активной закладки применяется соответствующий класс.

Однако, если закладки – это «одна страница», в которой панели появляются и скрываются с помощью AJAX, задание усложняется. Для этого обычно используют персонифицированные ссылки:

http://example.com/#tab-three

Функциональные закладки можно реализовать и без JavaScript, используя псевдо-класс CSS3 :target. Хотя сейчас все-таки лучше делать закладки с помощью JavaScript.

Такой способ считается лучше, поскольку у персонифицированных ссылках есть некоторые проблемы:

- если загружать страницу по ссылке, содержание прокручивается вниз, чтобы ID был в верхней части страницы. Лучше, чтобы такого не происходило. Проблема устраняется с помощью preventDefault().

- При изменении персонифицированной ссылки в историю браузера появляется пункт. При нажатии на вкладку «назад» происходит переключение на раздел соответствующего идентификатора. Такое поведение также нежелательно.

По этим причинам мы не будем применять персонифицированные ссылки, а только задействуем параметры URL (без прокрутки вниз).

Используем функцию history.replaceState(),  при которой изменение URL не влияет на вкладку «Назад».

Адрес URL выглядит так:

http://example.com/?tab=tab-three

А код плагина такой:

function($) {

		// Определяем плагин
    $.organicTabs = function(el, options) {

    	// Оригинальный вариант JavaScript
        var base = this;

        // Вариант jQuery
        base.$el = $(el);

        // Навигация для текущего селектора, переданная в плагин
        base.$nav = base.$el.find(".nav");

        // Выполняем один раз при вызове плагина
        base.init = function() {

        	// Загружаем опции
            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Скрываем то, что нужно скрыть
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            });

            // При нажатии на закладку навигации...
            base.$nav.delegate("a", "click", function(e) {

            	// Предотвращаем обработку по умолчанию
            	e.preventDefault();

                // Вычисляем текущий список по классу CSS
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // Список переместится в
                    $newList = $(this),

                // Вычисляем ID нового списка
                    listID = $newList.attr("href").substring(1),

                // Устанавливаем высоту внешнего контейнера для текущего внутреннего списка
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                		$allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Гасим текущий список
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Выводим новый список в возвратной функции
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // выравниваем внешний контейнер так, чтобы он прижимался к новому списку
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        }, base.options.speed);

                        // Удаляем выделение - Добавляем закладку
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");

			// Изменяем адресную строку окна - добавляем параметр URL
			if (window.history && history.pushState) {
				// ПРИМЕЧАНИЕ: не берем в счет текущие параметры
				history.replaceState("", "", "?" + base.options.param + "=" + listID);
                        }
                    });

                }

                // Не будет работать как обычная ссылка.
                // Останавливаем дальнейшую обработку
                return false;
            });

        };
        base.init();
    };

		$.organicTabs.defaultOptions = {
		    "speed": 300,
		    "param": "tab"
		};

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

Используются также опции:

$.organicTabs.defaultOptions = {
    "speed": 300, // Скорость смены закладки в миллисекундах
    "param": "tab" //Добавляемая строка в адресе URL
};

В чем же улучшение? При загрузке страницы, мы вытягиваем параметр URL и передаем его для обработки в JavaScript. Используем язык PHP:

// Обрабатываем активную закладку с помощью параметра URL
var tab = $("a[href='#<?php echo $_GET['tab']; ?>']");
if (tab.length) {
	tab
		.closest(".nav")
		.find("a")
		.removeClass("current")
		.end()
		.next(".list-wrap")
		.find("ul")
		.hide();
	tab.addClass("current");
	$("#<?php echo $_GET['tab']; ?>").show();

Этот код получает параметр URL, выделяет закладку и выводит необходимое содержание.
Исходники