CODEWITHSUNDEEP
htmlcss
Chinchan
Chinchan

Reputation: 29

Multiple Hyperlink contents targetted to display in one html file

I have 2 hyperlinks. I am aiming to target every hyperlink content to be displayed in a single page "result.html"

Example: Many to one -> Many hyper links content to one <.html> page

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

I tried using iframe, but no luck.

Could you please suggest where I went wrong.

Thanks & Regards.

Upvotes: 0

Views: 257

Answers (2)

Ahmad Pujianto
Ahmad Pujianto

Reputation: 359

What about using a parameter? like this :

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

or use jquery to change element
So instead of loading a new page the link is change the element you want..

On below sample I will change the image on a webpage :

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

the link is like this :

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

The script is like below :

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

Third option : Using pure css (copying the answer from here

Try using css like this :

.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 part :

<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>

Hope this is what you need

Upvotes: 1

Ahmed Shehatah
Ahmed Shehatah

Reputation: 668

Let's say that you have two anchor elements in the same page result.html

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

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

And you need to click on Go To A Content to jump to a <div> element with content A and click on Go To B Content to jump to a <div> element with content B.

  1. Give each <div> element an id=""

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

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

  1. Use this id in each corresponding anchor element as follows:

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

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

This should do the mission.

I hope this is informative and have a happy code.

Upvotes: 0

Related Questions