Question

我创建了以下代码来显示和隐藏div。这一次显示一个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

我认为Safari的问题是因为它没有在没有click属性的a元素上引发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();
});

注意使用类将元素组合在一起，这样就不会有太多的代码重复。

Answer 2

您在问题中引用的代码在结尾处的字符无效。在最终;之后，它是一个U + 200B角色。如果我实际上复制并粘贴了您的代码，它在我尝试过的每个浏览器中都会失败：http://jsbin.com/ojezin首先在此时构建测试用例（请参阅我对该问题的评论），我想我会不知何故介绍了那个角色，所以我就删除了它。但后来我开始思考并做了另一个副本和粘贴，而且，角色就在那里。

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

2 个答案: