Ссылка на определенную (скрытую) вкладку с текущей страницы и других страниц с использованием привязок в JQuery?

Я просмотрел несколько ответов на этом сайте, но по какой-то причине они не смогли решить мою проблему (как выбрать конкретную вкладку с другой страницы, используя тег привязки в JQuery..?). Я тестирую это только на своем локальном компьютере, поэтому не уверен, что это повлияет.

Я хочу ссылаться на каждую вкладку с текущей страницы, а также с других страниц. Прямо сейчас я могу щелкнуть каждую вкладку, и она отлично работает, а URL-адрес сайта меняется (# tab1, # tab2 и т. д.).

Однако, например, если я щелкну ссылку вкладки 1 (не фактическую вкладку, а ссылку на странице, которая предназначена для вкладки 1), когда вкладка 2 видна, ничего не произойдет, но URL-адрес изменится на /site.html#tab1 . Однако, если я щелкну ссылку «Вкладка 1», когда вкладка 1 видна, она успешно приведет меня к вкладке 1. Что-то идет не так, потому что вкладки скрыты — ссылки работают только для той вкладки, которая в данный момент видна. Я полагаю, что если я смогу заставить его работать хотя бы на странице, я смогу заставить его работать и по ссылкам за пределами страницы.

По сути, я хочу иметь возможность отправить кому-нибудь ссылку на /site.html#tab3 и перейти на эту вкладку.

Мой код:

    $(document).ready(function() {

      //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return;
    });
});

И:

$(document).ready(function () {

    var tabId = window.location.hash; // will look something like "#h-02"
    $(tabId).click(); // after you've bound your click listener
});

И вкладки:

 <ul class="tabs">
        <li><a href="#tab1">Ex 1</a></li>
        <li><a href="#tab2">Ex 2</a></li>
        <li><a href="#tab3">Ex 3</a></li>
        <li><a href="#tab4">Ex 4</a></li>

И пример содержимого вкладки и ссылка на странице на вкладку:

//tab content
<div class="tab_container">
        <div id="tab1" class="tab_content">
          <h2>Ex 1</h2>

//Link to Tab 1 from right menu
<ul><li>
<a href="#tab1">Click here to go to tab 1</a></li></ul>

Спасибо!!


jquery tabs hyperlink hidden visible
person Samantha9000    schedule 26.11.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

видеть это:

Сделайте это, когда ваша страница загрузится (когда дом будет готов)

var tabId = location.hash; // will look something like "#h-02"

проверить хэш

 if(tabId){
   $(tabId).show(); // this will fired only when url get hash
   $(tabId).siblings().hide(); // this will show only targeted tab 
                               // others get hidden
 }

что это будет делать, когда вы получите такой URL-адрес site.html#tab1

variable tabId будет иметь значение #tab1

затем условие, если блок кода покажет целевую вкладку

person Jai    schedule 26.11.2012
comment
Это работало в сочетании с stackoverflow.com/questions /4177323/‌​ery-tabs - person Samantha9000; 26.11.2012
comment
Я должен уточнить, что ваше решение позволило мне сделать ссылку с ДРУГИХ страниц на определенную вкладку - и это здорово. Но в целом у меня есть проблема с нажатием ссылки вместо вкладки напрямую: если я щелкну ссылку в своем меню, она успешно изменится на содержимое правой вкладки. Однако, когда я нажимаю на вкладку, вкладка выскакивает, а другие остаются меньше. Когда я нажимаю ссылку в меню на вкладку, ничего не меняется ... какая бы вкладка, на которую я в последний раз щелкнул, остается открытой. - person Samantha9000; 26.11.2012

arrow_upward
1
arrow_downward

Добавьте общий класс к ссылкам на вкладки. Когда вы нажимаете на ссылку, вы можете инициировать щелчок на соответствующей вкладке.

HTML

<a href="#tab1" class="tab-link">Click here to go to tab 1</a>

JS

$('.tab-link').click(function(){
    $('ul.tabs li a[href="'+this.href+'"]').parent().click();

});
person charlietfl    schedule 26.11.2012
comment
По какой-то причине это не сработало для меня, но привело меня к следующему: [linkhttp://stackoverflow.com/questions/4177323/html-link-to-trigger-certain-jquery-tabs. И это действительно сработало. Если я щелкну ссылку в своем меню, она успешно изменится на содержимое правой вкладки. Однако, когда я нажимаю на вкладку, вкладка выскакивает, а другие остаются меньше. Когда я нажимаю ссылку в меню на вкладку, ничего не меняется ... какая бы вкладка, на которую я в последний раз щелкнул, остается открытой. - person Samantha9000; 26.11.2012