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

は、ここで私はあなたがタブを実装しようとしているあなたの質問およびコードから理解して何からthe fiddle

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

です。 jQueryUIを使用して簡単にタブを実装できます。ここにそのリンクがあります。 http://jqueryui.com/demos/tabs/

更新： ここには、実装した内容に基づく解決策があります。あなたのソリューションでは、ulタグ内でliタグを使用していません。このため、HTMLが無効になり、さまざまなブラウザで問題が発生する可能性があります。有効なhtmlで更新されたコードがここにあります。 http://jsfiddle.net/byeGu/

Answer 3

は、あなたが本当に使いたいですかhref？与えられた答えは、具体的に間違っている場合だけでなく、場合、http://jsfiddle.net/diode/mcQpF/1/