Question

以下好的是我正在使用此代码的代码的一部分。它应该是你点击图像的地方，它“显示”之前隐藏的div。然后，当您单击另一张图片时，它会隐藏当前打开的div并显示新的div。它适用于IE以外的每个浏览器（当然。）我不知道我的脚本做错了什么，请帮忙吗？

<div class="content">
<table width="100%" border="0">
<tr>
  <td align="center">
    <a id="1" href="#"><img src="..." width="100" height="92" alt="1" /></a>
    <a id="2" href="#"><img src="..." width="100" height="70" alt="2" /></a>
    <a id="3" href="#"><img src="..." width="100" height="112" alt="3" /></a>
    <a id="4" href="#"><img src="..." width="100" height="65" alt="4" /></a> 
    <a id="5" href="#"><img src="..." width="100" height="141" alt="5" /></a>
    </td>
  </tr>
</table>
</div>

<div id="frame1">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>
<div id="frame2">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
  </iframe>
</div>
<div id="frame3">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>

等...

<script>
//controller for first site
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
//controller for second site
$("a#2").click(function () {
    $("#frame1,#frame3,#frame4,#frame5").hide("fast");
    $("#frame2").show("slow");
});
//controller for third site
$("a#3").click(function () {
    $("#frame1,#frame2,#frame4,#frame5").hide("fast");
    $("#frame3").show("slow");
});
//controller for fourth site
$("a#4").click(function () {
    $("#frame1,#frame2,#frame3,#frame5").hide("fast");
    $("#frame4").show("slow");
});
//controller for fifth site
$("a#5").click(function () {
    $("#frame1,#frame2,#frame3,#frame4").hide("fast");
    $("#frame5").show("slow");
});
//button close frames
$("button").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
});
</script>

当然帧div的css必须是“display：none;”它的工作原理。

Answer 1

$(document).ready(function() {
  $("a#1").click(function () {
    $('div[id~="frame"]').css({"display":"none"}); //hides all divs with id containing "frame"
    $("#frame1").show("slow");
  });
});

注意：这不是一个好习惯。

必须启动ID和NAME元素用字母表示大写字母A到Z. 或小写a至z;一个数字不是允许。在第一封信之后字母数（a到z，A到Z），数字（0到9），连字符（ - ），下划线（_），冒号（:)和允许句点（。）。

Answer 2

我记得有类似的问题...隐藏所有然后显示一个解决了我的问题... 所以试试看

//controller for first site
$("a#1").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});

并尝试使用其他标识符然后枚举

Answer 3

您是否已将jQuery代码放在document ready block中？有点像这样：

$(document).ready(function() {
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
});

当Firefox能够在执行之前加载我的javascript文件时，我遇到了这个问题。 IE有一些问题。

修改：尝试使用链接的文字ID。 e.g：

<a id="link1" href="...">link text</a>

ID不是以数字开头，因此IE可能会给出问题。

Answer 4

试试下面的代码，但不确定，

$("a#1").live('click', function(event) {//hide and show}

Answer 5

我认为您应该尝试提供不以数字开头的链接ID值。 Numbers aren't valid to start out ID and NAME attributes，但可以在初始字符后使用。

另外，我可以建议你写出类似的代码：

$('div.content a[href="#"]').click(function(){
    // I'm assuming that you'll be changing the ID of the link,
    // so we'll use the IMG instead
    var num = $(this).find('img').attr('alt');

    $('iframe').not('#iframe'+num).hide('fast')
               .end().filter('#iframe'+num).show('slow');
});

这样，您只需要这一小块代码来处理处理IFRAME显示/隐藏行为的所有重复代码。只需按照您的意愿调整即可。

JQUERY;显示/隐藏不在IE中触发，适用于其他浏览器

5 个答案: