Can content in one div from menu bar

Question

I have a menu bar with 3 links. When you click on those links, i want the content to change in the main div. The links will be to 3 different files. one of them is an html file and the other 2 are php files. I dont really know javascript, but this is what i have so far:

<ul id="nav">
<li><a href="#" id="link1" onclick="changeDiv('1')">View Records</a></li>
<li><a href="#" id="link2" onclick="changeDiv('2')">Enter Information</a></li>
<li><a href="#" id="link3" onclick="changeDiv('3')">View Upcoming</a></li>
</ul>

the javascript that i have is:

<script type="text/javascript">
   function changeDiv(link)
   {
      var contentDiv = $('#content');
      if (link == '1')
         contentDiv.html();
      if (link == '2')
         contentDiv.html();
      if (link == '3')
         contentDiv.html();

   }
</script>

and from there i have tried a bunch of different things, but now im stuck. What format does it all need to be in?

Same poster, related question - http://stackoverflow.com/questions/6850979/change-div-content-with-link-in-another-div — Daniel Szabo, Jul 28 '11 at 18:38

Emil Condrea · Answer 1 · 2011-07-28T19:02:25.990

1

you have to use jquery : include this in your header $(document).ready(function(){ $('#link1').click(function(){ $('#main').load('ajax/test.html '); })

    $('#link2').click(function(){
        $('#main').load('ajax/test2.html ');
    })

    $('#link2').click(function(){
        $('#main').load('ajax/test3.php ');
    })

    })

</script>

<a id="link1" href="#">asd</a>
<div id="main"></div>

edited Jul 28 '11 at 19:02

answered Jul 28 '11 at 18:37

Emil Condrea

9,705
7
33
52

where would i put that in the file at? – Emily Jul 28 '11 at 18:37
where #result and #container is, what would go there? my content div is #main, so would that go where #content is? – Emily Jul 28 '11 at 18:40
just forgot about #container, and the #result in your case is #main – Emil Condrea Jul 28 '11 at 18:43
that still doesnt work. What kind of format should the files be that i am linking? like does the html file need to have all the basic html stuff like etc? – Emily Jul 28 '11 at 18:52
are running on a server , or how ? – Emil Condrea Jul 28 '11 at 19:22
i am just viewing it in a browser. – Emily Jul 28 '11 at 20:33

score 0 · Answer 2 · answered Jul 28 '11 at 18:40

if your are using jQuery have a look to jQuery.load(). Your code should be something like this:

function changeDiv(link){
   if(link == '1') jQuery('#content').load('htmlPage1.html');
   if(link == '2') jQuery('#content').load('htmlPage2.html');
   if(link == '3') jQuery('#content').load('htmlPage3.html');
}

Assuming that the div where you want to put your content has the id "content", off course you have to customize addresses that jQuery loads (htmlPage2.html ...)

Hope this helps

Can content in one div from menu bar

2 Answers2