查询；显示/隐藏在 IE 中不会触发，可在其他浏览器上运行

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

只需尝试以下代码，但不确定，

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

Answer 4

您是否已将 jQuery 代码放入 文档就绪块 中？
有点像这样：

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

当 Firefox 能够在执行之前加载我的 javascript 文件时，我也遇到了这个问题。 IE 在这方面遇到了更多问题。

编辑：尝试为链接使用文本 ID。
例如：

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

ID 不应该以数字开头，因此 IE 可能会出现问题。

Answer 5

我认为您应该尝试提供不以数字开头的链接 ID 值。 数字对于 ID 和 NAME 属性无效，但它们可以用在初始字符之后。

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

$('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 显示/隐藏行为的所有重复代码。只要你愿意就可以调整它。