How to link HTML sections?

Question

I am slightly new at web design and HTML,JS,CSS.

-I created a page with basic header,navigation bar,image slider and basic sections.Home page is looking like this atm; http://i65.tinypic.com/98a4gh.jpg

I wanted to open "Programs" section as an empty page with just same header.So I copied codes and created a new html file and linked it for "Programs";

<li><a href="example.html#section1" class="sec" name="section1">Programs</a></li>

As you know It opens a new html file in same tab with empty body ( "example.html#section1" contains an empty body) ( http://i68.tinypic.com/dorzfk.png)

The question is ; Is there way to create direct link of the section (with any of languages)?.I mean it shouldn't use a new html file or iframe. I have spent so much time for searching but I think I couldn't search it right. T_T

I think what you want to look into is using AJAX or Angular to load partial HTML content pages and then inject the code into your main container node. — jeffjenx, Jan 08 '16 at 18:01
searching "html templating languages" might work for what you need too — Joseph Marikle, Jan 08 '16 at 18:09

score -1 · Answer 1 · edited May 23 '17 at 11:45

There is of course a way to do this from scratch with javascript. Something like this;

How to use a link to call JavaScript? Would be a good place to start.

I do want interject my two cents which would be to look into a framework like bootstrap and/or foundation where a lot of these things are already set up for you to use out of the box. Learning to do it on your own is important but these frameworks will help you get the big picture before you start getting held up on things like this.

Edit for redundancy:

From user EndangeredMassa:

<html>
<head>
     <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>

Yes but I recommend learning the basics before any framework. Otherwise you can be much more limited in how you implement things. Also, some jobs I've worked at required me to use basic javascript (for example, no jQuery or whatever) which I would have struggled with if I had not learned it first. — Steven Linn, Jan 08 '16 at 18:23
@StevenLinn While I agree that would be the ideal method, I think it would be wiser for someone to take the shortcut first and remain interested in working with code then to get stuck and give up all together. That's why I gave the answer (or linked as the case were) with a basic approach but gave these frameworks a shout out as someone new may not have heard of them and may be interested in doing research on them. — RockSteady, Jan 08 '16 at 21:49

How to link HTML sections?

1 Answers1