0

I have used bootstrap nav nav-pills nav-justified

and i have 7 of these 

<li><a href="form.html">Form</a></li>

I have been able to click on form which will re-direct to the form page, but I can't seem to return to my home page without clicking back on the browser. I want to be able to just click on the Home button which i've included as part of my 7 <li>s I mentioned earlier. Also i would like to be able jump onto each page from the navbar tab. 

<div class="header">
    <div class="container">
        <ul class="nav nav-pills nav-justified">
            <li><a href "#">Home</a></li>
            <li><a href "#">About</a></li>
            <li><a href "#">JavaScript</a></li>
            <li><a href "#">JQuery</a></li>
            <li><a href="AngularJS.html">AngularJS</a></li>
            <li><a href "#">API</a></li>
            <li><a href="form.html">Form</a></li>
            <li><a href "#">Contact</a></li>
        </ul>
    </div>
</div>

So from that above, when i click on form, im on the form page, but i cannot go back to the homepage(index.html) unless i click back on the browser, i wanna be able to link to all the lists by clicking each other.

yvesmancera
  • 2,915
  • 5
  • 24
  • 33
Jim41Mavs
  • 482
  • 4
  • 21

2 Answers2

0

Consider using Ajax to load different pages dynamically (with association with jQuery it said to be simpler to use) for the desired behavior or put everything on the single page and show content only when user clicks the link by JS and CSS.

As soon as you use Bootstrap elements you probably have jQuery already included in your project.

Useful links:

Check this page jQuery.get there is a very demonstrative example

$.get("demo_test.asp", function(data, status)
{
    alert("Data: " + data + "\nStatus: " + status);
});

where data - data received from the server. It should be your html code to replace the content.

To insert data use:

$.('#Content').html(data);   //id="Content" is from the comment
Community
  • 1
  • 1
hrust
  • 734
  • 1
  • 11
  • 34
  • I plan to use AJAX on my other webpages, but i dont want these navbars be ajax, can you please tell me what i need to include in my code to be able to get to lets say, from the home tab to the form tab, then back from the form tab to the home tab without clicking back on the browsers. – Jim41Mavs Oct 08 '15 at 19:49
  • Using AJAX you can replace part of your page lets say **div** with **id="Content"** where all your content displayed to the client is shown with the data received from server without reloading the whole page. Therefore, content displayed changes but user stay on the same page. – hrust Oct 08 '15 at 20:17
  • Hi guys, i have uploaded a word file (http://s000.tinyupload.com/index.php?file_id=94011560737596238178) with screenshots of my portfolio + code, please look at it and come back to me with my desired answer, many thanks in advance and message if you need more clarity on what i'm asking – Jim41Mavs Oct 16 '15 at 15:08
  • @Jim41Mavs If you want to go back to the home page replace `href="#"` to `href="index.html"` – hrust Oct 16 '15 at 15:15
  • i only left it href="#" on my index.html file, however i did change it to href="index.html" on all the other pages, i will change it on my index.html homepage file when i get home and i will let you know buddy (im currently at work) – Jim41Mavs Oct 16 '15 at 16:02
  • @Jim41Mavs Replace all the `#` in `href=""` to the html files of the pages you want. On the screenshots I see there are a lot of hashes that redirect you to the same page. – hrust Oct 16 '15 at 21:24
0

if you do this in a local host and you created these files as i find out when you click on the home you get 404 page the only thing that you have to do is to link your homepage file to the home button if i'm wrong comment me and explain your problem more and then i will help you.

mahdi azarm
  • 340
  • 2
  • 7
  • 18
  • Hi, http://s000.tinyupload.com/index.php?file_id=94011560737596238178 More details, in there, your help is greatly appreciated. – Jim41Mavs Oct 16 '15 at 15:10