在一个html文件中显示多个超链接内容

Question

我有两个超链接。我的目标是将每个超链接内容显示在单个页面"result.html">

的例子:多对一->许多超链接内容到一个<.html>页

click hyper link1:  ------> hyper link1's content in <result.html>
                
click hyper link2:  ------> hyper link2's content in <result.html>

我尝试使用iframe

你能告诉我哪里出错了吗?

谢谢,问候。

Answer 1

使用参数如何?像这样:

http://localhost/result.html?show=contentA

http://localhost/result.html?show=contentB

或者使用jquery来改变元素
所以不是加载一个新页面而是改变你想要的元素…

在下面的示例中，我将更改网页上的图像:

<img id="thechange" src="/images/test1.jpg"/>

链接如下:

<button onclick="change('Test2.jpg')" value="Change2"/>
<button onclick="change('Test3.jpg')" value="Change3"/>
<button onclick="change('Test1.jpg')" value="Change1"/>

脚本如下:

<script>
function change(imageName)
{
$("#thechange").attr("src","/images/"+imageName)
}
</script>

第三个选项:使用纯css(从这里复制答案

试试这样使用css:

.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
} 

Html部分:

<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>

希望这是你需要的

Answer 2

假设您在同一页面中有两个锚点元素result.html

<a href="">Go To A Content</a>

<a href="">Go To B Content</a>

你需要点击Go To A Content跳转到内容为a的<div>元素，点击Go To B Content跳转到内容为b的<div>元素。

1. 给每个<div>元素一个id=""

<div id="content_a"> .... </div>

<div id="content_b"> .... </div>

2. 在每个相应的锚元素中使用此id，如下所示:

<a href="#content_a">Go To A Content</a>

<a href="#content_b">Go To B Content</a>

这个应该能完成任务。

我希望这是有用的，并有一个快乐的代码。