1

我创建了以下代码来显示和隐藏 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除外！

任何帮助都将得到很好的接受！

4

2 回答 2

3

我认为 Safari 的问题是因为它不会在没有属性click的元素上引发事件。ahref

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

<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-16T09:03:26.670 回答
0

您在问题中引用的代码末尾有一个无效字符。在决赛之后是一个 U+200B 字符;。如果我实际上复制并粘贴您的代码，它会在我尝试过的每个浏览器中失败：http: //jsbin.com/ojezin首先在此端构建测试用例时（请参阅我对问题的评论），我以为我以某种方式介绍了那个角色，所以我就把它删了。但后来我开始思考，又做了一次复制和粘贴，瞧，角色就在那里。

于 2012-04-16T14:53:50.580 回答