Вкладки JQuery и гиперссылки (помогите исправить мой код, пожалуйста)

Question

Я использую несколько страниц, на каждой из которых есть вкладки jQuery. Допустим, у меня есть Page1.html с # tab1 и #tab2 и Page2.html с #tab3 и #tab4. Мой код имеет проблемы с:

1) Внутри содержимого вкладки Page1.html#tab2 имеет гиперссылку на Page1.html # tab1. Ссылка не работает - страница просто остается на # tab1 при нажатии на ссылку. Тем не менее, гиперссылка в контейнере меню на Page1 на # tab1 работает. Обе гиперссылки используют один и тот же a href="#tab1", но по какой-то причине при ссылке на Page1.html # tab1 работает только ссылка за пределами содержимого Page1.html#tab2. Гиперссылки в контейнере меню всегда работают.

2) Если я отправлю кому-нибудь гиперссылку на www.Page1.html#tab2, URL-адрес страницы отобразится как www.Page1.html с вкладкой 1, что означает, что я не могу напрямую связываться с вкладкой. Тем не менее, меню на сайте правильно ссылается на вкладки. Если я нажму на ссылку меню для Page2.html#tab3 при просмотре Page1.html, вкладка будет загружена правильно, а URL-адрес покажет Page2.html#tab3 и останется таким же, даже если я нажму #tab4 на странице. URL-адрес изменяется ТОЛЬКО при нажатии гиперссылок меню на разные страницы, например с Page1.html # tab1 на Page2.html#tab3. При нажатии Page2.html#tab3 на странице Page2.html#tab4 содержимое вкладки будет правильно изменено на #tab3, но URL-адрес останется как Page2.html#tab4.

Что я хочу:

А) Чтобы можно было отправить кому-то ссылку прямо на вкладку. При отправке кому-либо ссылки на www.Page1.html#tab2 всегда будет загружаться URL-адрес www.Page1.html с отображением первой вкладки. Тем не менее, гиперссылки меню на странице работают.

Б) Чтобы иметь возможность ссылки между вкладками на той же странице, если ссылка находится внутри содержимого вкладки. Например, ссылка в содержимом Page1.html # tab1 должна иметь возможность ссылаться на Page1.html#tab2. Прямо сейчас это работает только в том случае, если ссылка в содержимом Page1.html # tab1 ссылается на вкладку на отдельной странице, например Page2.html#tab3.

C) **ДОПОЛНИТЕЛЬНЫЙ КРЕДИТ**: Когда я щелкаю непосредственно на вкладке, изображение вкладки "выскакивает", а ранее выбранная вкладка "отменяет". Когда я щелкаю гиперссылку меню на вкладку, предыдущая вкладка остается всплывающей даже при отображении правильного содержимого для новой выбранной вкладки. Или, если для перехода на вкладку на новой странице используется ссылка меню, никакие вкладки не "всплывают", но отображается правильное содержимое вкладки. Я думаю, что решение вышеуказанных проблем решит и эту проблему.

Вот мой код:

<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
    $(tabId).show();
}
     $(function () { 
$('a[href^="#"]').click(function(e){        
    e.preventDefault();
    $('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>

<script type="text/javascript"> 
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand    sidebar
var tabId = location.hash;
if(tabId) {
    $(tabId).show();
}
 else {
 tabs.first().addClass("active").show();
 tabContents.first().show();
 }
 tabs.click(function() {
 var $this = $(this),
    activeTab = $this.find('a').attr('href');

if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
    $this.addClass('active').siblings().removeClass('active');
    tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>

В любом случае, я большой новичок, поэтому, чем лучше код, который вы предоставляете, тем легче я могу подтвердить ваш ответ как правильный.:)

Спасибо!

Answer 1

Вы должны сделать свои якорные теги хэшируемыми, то есть сделать их "закладками" для внешнего пользователя. Похоже, вы находитесь на пути к созданию собственного плагина для вкладок, но пользовательский интерфейс jQuery сделает за вас часть хеширования. Вот демонстрационные вкладки настроек, как вы уже упоминали:

http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/

DEMO:

Вот демонстрационная страница -> http://muledesign.com/demo/tabs/default-tabs.html

Демонстрационная страница с хэш-ссылкой на вкладку -> http://muledesign.com/demo/tabs/default-tabs.html

Re: точка C) - Попробуйте использовать плагин лайтбокса и присоединить функцию открытия / инициализации плагинов лайтбокса к событию активации на вкладках пользовательского интерфейса -> http://api.jqueryui.com/tabs/

Я ценю, что вы, возможно, не хотите использовать плагины, но вы уже используете jquery, так что.