Добавить активный класс в элемент li, если ссылка имеет hash-тег, а затем активировать элемент li

Я новичок в работе с вкладками jQuery, и я хочу иметь возможность добавлять функциональные возможности ссылки непосредственно на определенную вкладку из за пределами. В основном все работает отлично, пока отображается содержимое вкладки, но фактическая вкладка не активируется, однако при нажатии на нее она появляется. У меня есть фоновые изображения, установленные для вкладок. Это то, что мой css выглядит какДобавить активный класс в элемент li, если ссылка имеет hash-тег, а затем активировать элемент li

ul.tabs li a.tab-1 {background-position:0 0;} 
ul.tabs li a.tab-1:hover {background-position:0 -61px;} 
ul.tabs li.active a.tab-1 {background-position:0 -125px;}

Активный класс не отображается, когда вы отправлены по ссылке из внешнего источника.

<ul class="tabs"> 
    <li class="active"><a class="tab-1" href="#tab-1">history</a></li> 
    <li><a class="tab-2" href="#tab-2">About</a></li> 
</ul>

Вот остальные Jquery код:

$(document).ready(function() { 
    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    if(location.hash != "") { 
    /* If there is a tab id in the page URL */ 
    $(location.hash).show(); //Show tab content 
    $('ul.tabs li:has(a[href="location.hash"])').addClass("active").show(); //Activate tab 
    $(this).find("a").addClass("active"); //Add "active” class to href inside selected 
    } else { 
    $("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 href attribute value to identify the active tab content 
    location.hash = activeTab //Add the anchor to the url (for refresh) 
    $(activeTab).fadeIn(); //Fade in the active ID content 
    return false; 
    }); 
});

То, что я пытаюсь достичь, если URL имеет определенное местоположение: ../../#tab-1 установлен литиево активным, и показать активное состояние для элемент li.

источник

2011-04-18 MRC

Этот код работает для меня (я добавил стиль '.tab_content {display: none;}' и создал вкладки типа '

this is tab 1

'). Я заметил, что если я загружу страницу, то вручную измените URL-адрес в строке браузера, скажем, от # tab-1 до # tab-2, затем нажмите enter, он не отобразит вкладку 2. Но если я скопирую и вставляю URL-адрес # tab-2 в новое окно браузера, он работает. Он также работает из закладки. (Кстати, в конце этой строки отсутствует точка с запятой: 'location.hash = activeTab') – Jeff

Также работает при переходе с другой страницы непосредственно на # tab-2. – Jeff

спасибо, что поймал это ... – MRC

Вы можете имитировать событие щелчка:

$(document).ready(function() { 
    //create tab widget before the following code is executed 
    $(".tab_content").hide(); //Hide all content 
    if(location.hash != "") { 
    $(location.hash).show(); //Show tab content 
    $('ul.tabs li:has(a[href="'+location.hash+'"])').click(); //LINE CHANGED 
    } else { 
    $("ul.tabs li:first").click(); //LINE CHANGED 
    } 
... your code continues here

Кроме того, у вас была ошибка внутри вашего имеет (вы забыли Concat location.hach переменную) Надеюсь, что это помогает

источник

2011-04-28 06:22:51

Добавить активный класс в элемент li, если ссылка имеет hash-тег, а затем активировать элемент li

ответ

Смежные вопросы