SafariでJQuery Hide関数が機能しない

Question

divを表示/非表示する次のコードを作成しました。これは一度に1つのdivを表示し、他のdivを非表示にします。これはSafariを除くすべてのブラウザで機能します。

HTML

<div class="buttons"> 
    <a class="button" id="showdiv1">Div 1</a> 
    <a class="button" id="showdiv2">Div 2</a> 
    <a class="button" id="showdiv3">Div 3</a> 
    <a class="button" id="showdiv4">Div 4</a> 
</div> 
<div id="div1">1</div> 
<div id="div2" style="display:none;">2</div> 
<div id="div3" style="display:none;">3</div> 
<div id="div4" style="display:none;">4</div> 

jQueryの

$('#showdiv1').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div1').show(); 
}); 
$('#showdiv2').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div2').show(); 
}); 
$('#showdiv3').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div3').show(); 
}); 
$('#showdiv4').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div4').show(); 
});​ 

私は絶対初心者ですとjQueryは、複数のdiv要素を示すに最もエレガントな解決策になるとそれがあると思いました！ Safariを除いて！

ご迷惑をおかけして申し訳ございません。

Answer 1

属性を持たないa要素にclickイベントが発生しないため、私はSafariで問題が発生すると想定します。

また、コードを簡略化することができます。代わりにこれを試してください：あなたはそんなにコードの繰り返しを持たないように

<div class="buttons"> 
    <a class="button" id="showdiv1" href="#div1">Div 1</a> 
    <a class="button" id="showdiv2" href="#div2">Div 2</a> 
    <a class="button" id="showdiv3" href="#div3">Div 3</a> 
    <a class="button" id="showdiv4" href="#div4">Div 4</a> 
</div> 
<div id="div1" class="child">1</div> 
<div id="div2" class="child" style="display:none;">2</div> 
<div id="div3" class="child" style="display:none;">3</div> 
<div id="div4" class="child" style="display:none;">4</div> 

jQueryの

$(".button").click(function(e) { 
    e.preventDefault(); 
    $(".child").hide(); 
    $($(this).attr("href")).show(); 
}); 

は、一緒にグループ要素にクラスを使用することに注意してください。

Answer 2

質問で引用したコードの末尾に無効な文字があります。最終的に;の直後にU + 200Bの文字が表示されます。私が実際にあなたのコードをコピーして貼り付けると、それは私が試したすべてのブラウザで失敗します：http://jsbin.com/ojezin最初にこのケースでテストケースを構築するとき（私のコメントを参照してください）、私は何とかそのキャラクター私はそれを削除しました。しかし、私は思考して別のコピーと貼り付けをしました。そして、そのキャラクターはそこにいました。