2013-07-05 4 views
0

У меня есть набор вкладок:Почему URL-адрес не изменяется, когда я нажимаю на вкладку?

<ul class="tabs"> 
    <li><a href="#tab1">Data Pribadi</a></li> 
    <li><a href="#tab2">Pengangkatan</a></li> 
    <li><a href="#tab3">Lampiran</a></li> 
</ul> 
<div id="tab1" class="tab_content"> 
    tabs1 
</div> 
<div id="tab2" class="tab_content"> 
    tabs2 
</div> 
<div id="tab3" class="tab_content"> 
    tabs3 
</div> 

Каждая вкладка имеет уникальный идентификатор. Когда я нажимаю на вкладку с идентификатором tab1, я ожидаю, что URL-адрес страницы изменится на http://www.example.com/#tab1. Я ожидаю, что подобное произойдет и для каждой из других вкладок. Я использую этот код JavaScript, чтобы этот эффект:

$(document).ready(function() { 
    //When page loads... 
    $(".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 href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 
}); 

В той степени, что вы можете нажать на нужную вкладку и иметь изменение контента, it works. Однако, когда я нажимаю на одну из ссылок, чтобы изменить вкладку, URL-адрес не изменяется. Почему это и как я могу изменить URL-адрес, как я ожидаю?

+0

Вы можете уточнить, что вам нужно, потому что вам кажется, что код работает, проверьте [мое демо] (http://jsfiddle.net/vladkras/QrLMW/1/) – vladkras

ответ

0

Я бы изменить код немного добавив

if ($(this).attr("class")!='active') { 
    // all other code here 
    } 

просто не исчезать, когда он уже открыт, но все, кажется, работает: demo

+0

он может на самом деле, потому что он использует селектор –

+0

@ manoj.admlab yep, я заметил, что он готовит скрипку – vladkras

+0

спасибо за ответ, но при нажатии на вкладке url не появляется ... например, если кликнул вкладки 2 url: xxx.php # tabs2 – mayus

0

Снимите return false;. Эта строка сообщает jQuery не изменять URL-адрес; если вы do хотите, чтобы это было изменено, просто опустите его.

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