0

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.

Chinchan
  • 19
  • 1
  • 11
  • What exactly are you trying to acheive? Do you have an example of the code you've already tried. – learningtoanimate Feb 16 '21 at 01:02
  • Hello @learningtoanimate , Say I have 2 hyperlinks, a and b. And I have a result.html page. When I click on a, a's content should be displayed in result.html When I click on b, b's content should be displayed in result.html What I Tried:

    result

     – Chinchan Feb 16 '21 at 01:17
  • Update your question with the code for each location, this may be something you need to use PHP for. – learningtoanimate Feb 16 '21 at 01:20

2 Answers2

1

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

Ahmad Pujianto
  • 309
  • 1
  • 3
  • 11
0

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.

Ahmed Shehatah
  • 658
  • 5
  • 11
  • Hello @Ahmed, Although the given solution works for same page, when i will have to invoke specific div only from different .html page, it does not work. It displays all the divisions in the target page. Could you please advice – Chinchan Feb 16 '21 at 21:06
  • inside the `href=""` attribute just before the hashtag `href="#"` you can add the link of the page you want to use this anchor tag to jump into it. `Go To A Content` This will be it. Now you can go to the .html page with the link `../some/another/html/page/link` inside this page you have to name an element with `id="content_a"` so when you click on `Go To A Content` you jump to that page and jump also to that element inside of it – Ahmed Shehatah Feb 16 '21 at 21:55
  • Hi @Ahmed, Yes, I did the same. But No Luck. doc1:{
  • link1
  • link2
    • } connection.html: {
    } {
    } Both the divs are getting displayed, when i click on link 1 – Chinchan Feb 16 '21 at 22:31