CODEWITHSUNDEEP
htmlcss
S Adrian
S Adrian

Reputation: 39

How to target anchors in a div in the same page

I'm struggling with some anchors / other html pages ( buttons on left) to be displayed in another div in the same page ( to be more exactly in the right ). Are there any solutions to this with div? Or maybe with frame/iframe, even jQuery any tips please?

In the image you've got the source code

Upvotes: 0

Views: 1961

Answers (2)

Amyth
Amyth

Reputation: 32949

If the page links to a HTML page you can append an iframe using jQuery as follows:

$(document).ready(function(){
  $('.button').click(function(){
    // Prevent Default Action
    event.preventDefault();
    // get the href parameter
    var url = $(this).attr('href');
    // Append the iframe
    $('#content').append('<iframe src="'+ url +'"></iframe>');
  });
});

Here is a working Example

If you are able to return a JSON or XML response you can use $.ajax to get the response and then append it inside a div instead of an iframe.

Upvotes: 0

Quentin
Quentin

Reputation: 943591

Are there any solutions to this with div?

  1. Fetch the content with JavaScript (e.g. XMLHttpRequest).
  2. Strip out the bits you don't need (e.g. everything except the contents of the <body>
  3. Use DOM manipulation to add it to the div

Or maybe with frame/iframe

That is exactly what iframes were designed for. Set the target attribute of the anchor to the name of the iframe

Loading content into a portion of a page comes with a lot of gotchas. At the very least it interferes with the ability of visitors to link to the content they are actually viewing (although you can use the History API and pushState to compensate for that). It is almost always a better idea to just link to a new page which includes (via a template) any content that is common to all the pages.

Upvotes: 1

Related Questions