Question

    <div id="box1"> <a href="#"><img src="images/pskeksmall.jpg" alt="" /></a>
        <h2 class="subtitle">Student Makes our new website</h2>
        <p>We are very proud to announce that our new website was designed and created by Charlie Johnson</p>
        <ul class="contact">
            <li><a href="#" class="icon icon-facebook"><span></span></a></li>
            <li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li>
            <li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li>
        </ul>
    </div>

我想要做的是在一个小窗口中打开，并提供有关该主题的更多信息。我只是简单地看了一下JavaScript，所以如果没有JScript这么简单的方法就可以了。我也需要为其他3个盒子做这个。

编辑：也许我不是很清楚，我根本不想让用户离开页面，使用Chrome我知道弹出窗口在小对话框中打开，这就是我想要的信息由...提供。如果这是不可能的，有没有办法可以在不更改页面的情况下更改主文本区域中的信息？

编辑2：好的，所以我在W3Schools.com上找到了这个：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

所以我现在想知道是否可以使用我的图像代替按钮，并改变我而不是上面使用的段落。

Answer 1

简单的HTML方法是使用具有目标属性的标记：

<a href="/some/path" target="_blank">Try it</a>

代码文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Answer 2

以下是仅限CSS 示例，说明如何点击显示一个（通常是隐藏的）元素，然后可以显示更多信息。

不需要javascript！

.more-info {
 display: none;
 background-color: rgba(255,255,127,1);
 padding: 6px;
 border: 2px solid rgba(127, 0, 0, 1);
 }

#item1:target, #item2:target {
 display: inline-block;
 }

<ul>
  <li><a href="#item1">Click me for more info about Item 1</a></li>
  <li><a href="#item2">Click me for more info about Item 2</a></li>
</ul>

<p id="item1" class="more-info">Now you can read more information about Item 1</p> 
<p id="item2" class="more-info">Now you can read more information about Item 2</p>

如何让我的链接打开“弹出窗口”

2 个答案: