JQuery隐藏函数不'；我不在野生动物园工作

我创建了以下代码来显示和隐藏div。这将一次显示一个div并隐藏其他div。这适用于除Safari之外的所有浏览器

HTML

我是一个绝对的初学者，我认为Jquery将是显示多个div的最优雅的解决方案，事实就是如此！除了狩猎

---

任何帮助都会得到充分的回报

我认为Safari的问题是因为它不会在没有

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>

注意使用类将元素分组在一起，这样就不会有太多的代码重复。
问题中引用的代码末尾有一个无效字符。它是一个U+200B字符，紧跟在最后一个
之后。如果我真的复制并粘贴了你的代码，它在我尝试过的每个浏览器中都会失败：起初，在构建测试用例的时候（参见我对这个问题的评论），我以为我不知怎么地引入了这个字符，所以我只是删除了它。但后来我开始思考，并进行了另一次复制和粘贴，瞧，角色就在那里。
Safari上运行的jQuery对以选择器开头的属性没有问题。不过，代码缩短得很好。：-）是的-我确实认为是这样，当我打字时，我意识到
a
元素没有HREF。我会把它删掉。我必须同意T.J.我一直在寻找优雅，这当然是，尽管这仍然不起作用-（你测试的是哪个版本的Safari？Safari 5.1.5适合我：Safari 5.1.5也适合我，你在问题中引用的代码末尾有一个无效字符。它是一个U+200B字符。如果我真的复制并粘贴了你的代码，它在我尝试过的每一个浏览器中都会失败：在我以前的版本中，我假设我不知何故引入并删除了该字符，但显然不是。@T.J.Crowder它是代码中不可见的字符！我删除了代码的最后一部分并手动键入，代码现在可以工作了。该字符不可见，无法在中搜索（不要喊，但它对我有效）Dreamweaver！@user1335857:好交易！我把它作为一个答案发布了。在写问题时使用复制粘贴做得很好——你会惊讶有多少人重新键入了他们的代码，所以这种事情没有被弄明白。
$('#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();
});​

<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>

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