JQuery隐藏功能在Safari中不起作用

我创建了以下代码来显示和隐藏div。这一次显示了一个div，并隐藏了其他的一个div。这适用于除Safari之外的所有浏览器。JQuery隐藏功能在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之外！

任何帮助将被完全接受！

来源

2012-04-16 user1335857

适用于Safari 5.1.5的作品：http://jsbin.com/iqexec – 2012-04-16 09:08:46

对我也适用Safari 5.1.5 http://jsfiddle.net/RMhkW/ – peterfoldi 2012-04-16 09:10:44

您引用的代码在这个问题最后有一个无效的字符。这是一个U + 200B的角色。如果我真的复制并粘贴你的代码，它会在我尝试过的每个浏览器中失败：http://jsbin.com/ojezin在我的早期版本中，我认为我会以某种方式引入该字符并将其删除，但显然不。 – 2012-04-16 09:13:33

我会假设Safari的问题是因为它不会在a属性上产生click事件，因为它没有href属性。

此外，您的代码可以简化。试试这个：

<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(); 
});

注意使用类组元素结合在一起，这样你就没有那么多的代码重复。

来源

2012-04-16 09:03:26

在Safari上运行的jQuery在属性开始时与选择器没有问题。虽然不错缩短了代码。 :-) – 2012-04-16 09:08:26

是的 - 我确实认为是这种情况，这是因为我在打字时才意识到'a'元素没有外部参照。我会编辑它。 – 2012-04-16 09:09:04

我不得不同意T.J.我正在寻找优雅，这当然是，虽然这仍然无法正常工作。 :-( – user1335857 2012-04-16 12:43:20

您在问题中引用的代码在最后有一个无效字符。这是最后的;之后的U + 200B字符。如果我真的复制并粘贴你的代码，它会在我尝试过的每个浏览器中失败：http://jsbin.com/ojezin首先，当为此构建测试用例时（请参阅我对该问题的评论），我想我会以某种方式介绍该字符所以我刚删除它。但后来我开始思考并做了另一个复制和粘贴，并且角色在那里。

来源

2012-04-16 14:53:50

JQuery隐藏功能在Safari中不起作用

回答

相关问题