Вкладки jQuery: отключить хэш расположения окна

Question

У меня есть небольшой фрагмент, который переносит вас с одной вкладки на другую.

HTML выглядит так:

<ul id="tabs">
    <a href="#tab1">General Settings</a>
    <a href="#tab2">Keyboard Shortcuts</a>
    <a href="#tab3">Regional Settings</a>
    <a href="#tab4">Reset to Defaults</a>
</ul>

<div id="tab1" class="hide">This is tab 1</div>
<div id="tab2" class="hide">his is tab 2</div>
<div id="tab3" class="hide">his is tab 3</div>
<div id="tab4" class="hide">his is tab 4</div>

и jQuery выглядит так:

$('#tabs a').live('click',function(e){
    var a = $(this).attr('href').split('#')[1];
            $('div.hide:not(#' + a + ')').hide();
            $('#' + a).fadeIn();

    });

Теперь я хочу отключить хеш-теги, чтобы они не отображались в строке URL.

Пример: http://jsfiddle.net/HSJHp/show

Вот скрипка

Answer 1

Попробуйте что-то вроде этого ...

HTML выглядит так:

<ul id="tabs">
    <a href="" id="tablink1">General Settings</a>
    <a href="" id="tablink2">Keyboard Shortcuts</a>
    <a href="" id="tablink3">Regional Settings</a>
    <a href="" id="tablink4">Reset to Defaults</a>
</ul>

<div id="tab1" class="hide">This is tab 1</div>
<div id="tab2" class="hide">his is tab 2</div>
<div id="tab3" class="hide">his is tab 3</div>
<div id="tab4" class="hide">his is tab 4</div>

и jquery выглядит так:

$('#tabs a').live('click',function(e){
e.preventDefault();
var a = $(this).attr('id').split('tablink')[1];
console.log(a)
        $('div.hide:not(#tab' + a + ')').hide();
        $('#tab' + a).fadeIn();
});

Answer 2

Вы действительно хотите использовать href?Если вы этого не сделаете, это может быть достигнуто следующим образом

$(".tab-content").hide().filter(":eq(" + $(this).index() + ")").fadeIn();

См. Демонстрацию: http://jsfiddle.net/diode/mcQpF/1/

Answer 3

Из того, что я понимаю из вашего вопроса и кода вы пытаетесь реализовать вкладки Вы можете легко реализовать вкладки, используя jQueryUI. Вот ссылка для этого. http://jqueryui.com/demos/tabs/

Обновление : Вот решение, основанное на том, что вы реализовали. В вашем решении вы не используете теги li внутри тегов ul. Таким образом, это может привести к неверному HTML и может вызвать проблемы в разных браузерах. Вот обновленный код с верным HTML. http://jsfiddle.net/byeGu/