Question

我有4 <li>，我喜欢它们成为链接图像的触发器。我在这里使用javascript，这个项目不允许使用jQuery。请参阅代码段。

＆＃13;

	var children = document.querySelectorAll('#resistorContent > section[id]');
	function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
}

＆＃13;

/* Start Hidden, show first */
#resistorContent > section[id] {
    width: 940px;
    height: 400px;
    overflow: hidden;
    display:none;
}
#resistorContent > section[id]:first-child {
    display: block;
}

＆＃13;

<div id="resistorContent">
  <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
      <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
      <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
      <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
    </ul>
  </div>
</section>

＆＃13;

它在jsfiddle和这里的代码片段中工作得很好。但是如果将它们粘贴到文本编辑器并在浏览器中进行预览，则会产生不同的结果。它创建了一堆所有4个图像，并没有像javascript那样隐藏图像。我在这做错了什么？

提前致谢。

Answer 1

我非常肯定您的问题是您在文档的<head>元素中加载脚本。这会导致问题，因为您的脚本会尝试遍历DOM并进行更改，但如果您的脚本位于<head>标记中，则在包含图像的DOM准备好之前，它会执行。这就是为什么图像不被隐藏和只是堆叠的原因。尝试在结束</body>标记之前运行脚本。您的文件应该与此类似（但通常最好使用外部样式表并链接到您的javascript文件）：

<!DOCTYPE html>
<html>
<head>
    <title>Testing DOM loading and script placement</title>
    <style type="text/css">
        /* Start Hidden, show first */
        #resistorContent > section[id] {
            width: 940px;
            height: 400px;
            overflow: hidden;
            display:none;
        }
        #resistorContent > section[id]:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div id="resistorContent">
        <section id="resistorDetail1"><img src="//placehold.it/940x450/5B696A/fff/&text=PIC+1" alt=""></section>
        <section id="resistorDetail2"><img src="//placehold.it/940x450/4D686B/fff/&text=PIC+2" alt=""></section>
        <section id="resistorDetail3"><img src="//placehold.it/940x450/415558/fff/&text=PIC+3" alt=""></section>
        <section id="resistorDetail4"><img src="//placehold.it/940x450/345658/fff/&text=PIC+4" alt=""></section>
            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
                <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
                <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
                <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
            </ul>
        </section>
    </div>
    <script>
        var children = document.querySelectorAll('#resistorContent > section[id]');
        function showDetailContent(target) {
            // Simply loop over our children and ensure they are hidden:
            for (var i = 0, child; child = children[i]; i++) {
                child.style.display = 'none';
            }
            // Now, show our child we want to show
            document.getElementById(target).style.display = 'block';
        }
    </script>
</body>
</html>

这是一个不依赖于平台在正确位置插入javascript的演示：http://jsbin.com/qulajeroru/2/edit?html,output（点击＆＃34;用JS运行＆＃34;）

javascript在onmouseover时隐藏其余部分

1 个答案: