How to link from one html and display single div of many divs present in second html?

Question

I was trying to create

A.html : It contains links (Topic Headings)

B.html : It contains description of various topics separated in DIV's in a single html file

The size of B.html is very large...So when i link A.html with div id of B.html it loads entire B.html

Is there any way i can link both A and B so that link on A displays only linked DIV of B as a popup or in new tab...

This is code approach i was using

A.html
<html>
<body>
<div>
<a href="B.html#div1" rel="nofollow" target="_blank"/>Link to Topic in Page B</a>
</div>
</body>

B.html
<html>
<body>
<div id="div1">
Description of Topic A
</div>
<div id="div2">
Description of Topic B
</div>
<div id="div3">
Description of Topic C
</div>
<div id="div4">
Description of Topic D
</div>
</body>

http://stackoverflow.com/questions/18938180/how-to-get-the-html-of-a-div-on-another-page-with-jquery-ajax — imGaurav, Sep 28 '15 at 09:57
I know html/css/javascript only....if this requires more than it...please suggest topic only so that i can understand it before changing my approach — Moody Jatt, Sep 28 '15 at 10:15

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Open part of the B.html in a separate tab or display it from the A.html is possible with the iframe tag, but if you want to display specific div, I think you need to use a javascript: see Load content of a div on another page

edited May 23 '17 at 12:29

Community

1
1

answered Sep 28 '15 at 09:54

prompteus

1,051
11
26

Sanjay Bhardwaj · Answer 2 · 2015-09-28T10:40:57.670

0

Hope below solution might help you

<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #ab">Topic Heading 1</span><br>
<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #Aa">Topic Heading 2</span><br>
<span class="TopicHeadings" linkPageName="http://www.tutorialspoint.com/computer_whoiswho.htm #bs">Topic Heading 3</span><br>
<div id="divContent"></div>




$(document).ready(function () {
    $(".TopicHeadings").on( "click", function() {
       var linkPageName = $(this).attr("linkPageName");
       $('#divContent').load(linkPageName, function() {
          alert( "Load was performed." );
       });
    });
 });

Fiddler link : sample code

edited Sep 28 '15 at 10:40

answered Sep 28 '15 at 10:22

Sanjay Bhardwaj

412
2
10

You can go with below definition, – Sanjay Bhardwaj Sep 28 '15 at 10:34
Separating divs into html pages might be difficult as large number of divs will mean large no of pages to upkeep. – Moody Jatt Sep 28 '15 at 10:37

How to link from one html and display single div of many divs present in second html?

2 Answers2