change the page content by clicking on menu option

**peterx** · 02-15-2013 06:07 AM

Hi!
My question: how to change the page content by clicking on menu option (without opening a new page) with javascript.
I have written HTML and CSS code (menu), but i don't know how to start writing javascript code.
Need just a little guidance.

HTML Code:

<div class="menu">

<div id="nav">
        <ul>
            <li>
            <a href="http://"><font color="#000">AAAA</font></a>
               
            </li>

            <li>
            <a href="http://">BBBB</a>
                
            </li>

            <li>
            <a href="http://">CCCC</a>
                
            </li>

            <li>
            <a href="http://">DDDD</a>
             
            </li>
             <li>
            <a href="http://">EEEE</a>
                
            </li>
        </ul>
    </div>
   </div>

HTML Code:

.menu{
position:absolute;
top:80px;
left:0px;
font-family: Arial;
font-size:12px;
/*font-weight:bold;*/

}

#nav{
width:920px;
height:30px;

background-color:#B1B3A8;

}


#nav ul
{margin:0px; 
padding:5px;

}

#nav ul li{
display:inline; 
height:30px; 
float:left; 
list-style:none;
margin-left:30px; 
position:relative;
}


#nav li a
{color:#fff; text-decoration:none;}

#nav li a:hover
{text-decoration:underline;
 color:#fff;

}

**orangeadnan** · 02-15-2013 11:16 AM

I'm not good with JS but I think you can use getElementById and innerHTML to change page content. Or try using jQuery accordion?

**JMRKER** · 02-15-2013 11:42 AM

No need for jQuery for such a simple problem. Like using a sledge hammer to drive in a tack!

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.menu{
  position:absolute;
  top:80px;
  left:0px;
  font-family: Arial;
  font-size:12px;
  /*font-weight:bold;*/
}
#nav{
  width:920px;
  height:30px;
  background-color:#B1B3A8;
}
#nav ul {
  margin:0px; 
  padding:5px;
}
#nav ul li{
  display:inline; 
  height:30px; 
  float:left; 
  list-style:none;
  margin-left:30px; 
  position:relative;
}
#nav li a {color:#fff; text-decoration:none;}
#nav li a:hover { text-decoration:underline; color:#fff; }

.pg { display:none; }
.h1 { text-align:center; font-size:2em; }
</style>

</head>
<body>
<form id="myForm" action="" method="post" onsubmit="return false">
<div class="menu">
 <div id="nav">
  <ul>
   <li><a href="#" onclick="return toggle('pg0')"><font color="#000">AAAA</font></a></li>
   <li><a href="#" onclick="return toggle('pg1')"><font color="#000">BBBB</font></a></li>
   <li><a href="#" onclick="return toggle('pg2')"><font color="#000">CCCC</font></a></li>
   <li><a href="#" onclick="return toggle('pg3')"><font color="#000">DDDD</font></a></li>
   <li><a href="#" onclick="return toggle('pg4')"><font color="#000">EEEE</font></a></li>
  </ul>
 </div>
 <div id="pg">
  <div id="pg0" class="pg"> <h1 class="h1"> AAAA page </h1> </div>
  <div id="pg1" class="pg"> <h1 class="h1"> BBBB page </h1> </div>
  <div id="pg2" class="pg"> <h1 class="h1"> CCCC page </h1> </div>
  <div id="pg3" class="pg"> <h1 class="h1"> DDDD page </h1> </div>
  <div id="pg4" class="pg"> <h1 class="h1"> EEEE page </h1> </div>
 </div>
</div>
</form>
<script type="text/javascript">
function toggle(IDS) {
  var sel = document.getElementById('pg').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { 
    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
  }
  var status = document.getElementById(IDS).style.display;
  if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
                    else { document.getElementById(IDS).style.display = 'block'; }

  return false;
}
</script>

</body>
</html>

**JMRKER** · 02-15-2013 11:56 AM

Just for fun, just a bit fancier...

Code:

<!DOCTYPE HTML>
<!-- From: http://www.webdeveloper.com/forum/showthread.php?273153-change-the-page-content-by-clicking-on-menu-option#top -->
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.menu {
  position:absolute;
  top:80px;  left:0px;
  font-family: Arial;
  font-size:12px;
  font-weight:bold;
}
#nav { width:920px;  height:30px;  background-color:#B1B3A8; }
#nav ul { margin:0px; padding:5px; }
#nav ul li {
  display:inline; 
  height:30px; 
  float:left; 
  list-style:none;
  margin-left:30px; 
  position:relative;
  color:#000;
}
#nav li a { text-decoration:none; color:#000000; }
#nav li a:hover { text-decoration:underline; color:white; background-color:orange; font-size:1.5em; }

.pg { display:none; }
.h1 { text-align:center; font-size:2em; }
</style>

</head>
<body>
<form id="myForm" action="" method="post" onsubmit="return false">
<div class="menu">
 <div id="nav">
  <ul>
   <li><a href="#" onclick="return toggle('pg0')">AAAA</a></li>
   <li><a href="#" onclick="return toggle('pg1')">BBBB</a></li>
   <li><a href="#" onclick="return toggle('pg2')">CCCC</a></li>
   <li><a href="#" onclick="return toggle('pg3')">DDDD</a></li>
   <li><a href="#" onclick="return toggle('pg4')">EEEE</a></li>
  </ul>
 </div>
 <div id="pg">
  <div id="pg0" class="pg"> <h1 class="h1"> AAAA page </h1> </div>
  <div id="pg1" class="pg"> <h1 class="h1"> BBBB page </h1> </div>
  <div id="pg2" class="pg"> <h1 class="h1"> CCCC page </h1> </div>
  <div id="pg3" class="pg"> <h1 class="h1"> DDDD page </h1> </div>
  <div id="pg4" class="pg"> <h1 class="h1"> EEEE page </h1> </div>
 </div>
</div>
</form>
<script type="text/javascript">
function toggle(IDS) {
  var sel = document.getElementById('pg').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { 
    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
  }
  var status = document.getElementById(IDS).style.display;
  if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
                    else { document.getElementById(IDS).style.display = 'block'; }
  return false;
}
</script>
</body>
</html>

**peterx** · 02-17-2013 09:26 AM

Thank you for your help!
Can you explain (function toggle (IDS) {………}) // how does it work, I am not good in JavaScript.
I posted this question to a FORUM and somebody answered that” you can also solve the problem with Js event listeners”
If it is possible please explain also how I can solve this problem with JS event listeners.

Peter

**JMRKER** · 02-17-2013 10:17 AM

Originally Posted by peterx

Thank you for your help!
Can you explain (function toggle (IDS) {………}) // how does it work, I am not good in JavaScript.
I posted this question to a FORUM and somebody answered that” you can also solve the problem with Js event listeners”
If it is possible please explain also how I can solve this problem with JS event listeners.

Peter

You're most welcome.
Happy to help.

The toggle function just collects all the <div> elements within the 'pg' element.
It resets all displays to 'none', except the currently referenced IDS.
If the id value matches the current status, it changes (toggles) between 2 different states (display:block or display:none)

The event listener in this particular case is the 'onclick=' event
which occurs when you click on the mouse.

Good Luck!

Thread: change the page content by clicking on menu option

Thread Tools

Display

change the page content by clicking on menu option

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions