-5

My <nav> element contains the buttons that should lead to different pages I would like to open in the <section> part of the same site. But how do I specifically tell the page to load the second page in the place provided? In short: how to open a page inside a page.

In the tutorial they stop at this point:

 <div id="navigation">
        <ul>
            <li><a href="#">Jump</a></li>
            <li><a href="#">Map</a></li>
            <li><a href="#">SHOP</a></li>
        </ul>
    </div>

So, when I press the Jump button I would like a specific html file open in the <section> element.

How do I do this?

Thank you!

Алексей Наумов
  • 189
  • 1
  • 3
  • 13
  • please insert any code that is relevant. and what have you tried so far. – aahhaa Jul 24 '15 at 18:59
  • You need to populate the href attribute with the page you want to navigate to. The other option would be to attach event handlers and navigate to the pages using JavaScript. – Mychal Hackman Jul 24 '15 at 19:03

2 Answers2

1

The HTML standard way would be to create anchors:

<a href='jump.html'>Jump</a>

A nav element is just a block-level element - just like a div, it doesn't "do" anything.

https://html.spec.whatwg.org/multipage/semantics.html#the-nav-element

If you're wanting to load the <section> element with the content of another page, you'll need to use XHR (Ajax) via JavaScript. Another option would be to embed an iframe and set the target attribute of the anchor to the ID of the iframe. There are various JavaScript libraries that are used to assist with this.

jQuery is quite popular has a lot of documentation and tutorials if you want to try the Ajax route, the "quick" way would be to use an iframe, but it will have some issues:

<nav>
    <ul>
        <li><a href="jump.html" target='cFrame'>Jump</a></li>
        <li><a href="map.html" target='cFrame'>Map</a></li>
        <li><a href="shop.html" target='cFrame'>SHOP</a></li>
    </ul>
</nav>

<iframe name='cFrame' id='cFrame'></iframe>

If you decide to try jQuery, you could look into the load() function: http://api.jquery.com/load/

Mychal Hackman
  • 319
  • 1
  • 8
  • It was a long time ago that I made my first site, basically at school, And we used frames - that did all the stuff. Now I come to understand, that I need JavaScript to load everything (sort of an engine for the page). I thought there might be a shortcut, that I missed6 while reading the tutorials. – Алексей Наумов Jul 24 '15 at 19:09
  • Was I correct in what you were trying to do? Hope that helped. – Mychal Hackman Jul 24 '15 at 19:12
  • Yes, could you be more detailed about "Another option would be to embed an iframe and set the target attribute of the anchor to the ID of the iframe." May be a place / tutorial where to read about! – Алексей Наумов Jul 24 '15 at 19:20
  • I've updated my answer to demonstrate how to target an iframe, as well as a link to jQuery's load() function. – Mychal Hackman Jul 24 '15 at 19:27
  • That's it! Could you please say if those 'issues' are important , or at least where to read about them, as I have just tried your code and it works just the way I want it. I need to make my mind on whether to just use the iframe, or get deeper into the jQ. – Алексей Наумов Jul 24 '15 at 19:37
  • The first big one that comes to mind is sizing the iframe, it will not dynamically size to the content. This may not be much of an issue if your pages are similar in width and height, but it's definitely something to keep in mind. – Mychal Hackman Jul 24 '15 at 19:39
1
 <div id="navigation">
        <ul>
            <li><a href="#jump">Jump</a></li>
            <li><a href="#map">Map</a></li>
            <li><a href="#">SHOP</a></li>
        </ul>
 </div>

<div name="jump">Your first button 
    jumps to this because it has the same
    name as your href for your link
</div>

<a name="map">The map button will jump here</a>

Tutorial

Another tutorial

If you want to load another page on the current page you're on you need to use frames and javascript Here is the tutorial on that

Community
  • 1
  • 1
Huang Chen
  • 1,177
  • 9
  • 24
  • Thanks for your effort, not exactly what I meant (probably my phrasing of the question was not so good), but now this will come in handy too! Thanks for the last tutorial - that's what I needed. – Алексей Наумов Jul 24 '15 at 19:19