Change the page content by clicking on menu option

JavaScript
1

Hi!
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.


<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>



.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;

}
2

Hi there,

Welcome to the forums :slight_smile:

You might want to have a look at jQuery Tabs, which does what you want and is easy to configure.
Alternatively, @ralph_m ; has a great article about this on his homepage, where he explains how to do-it-yourself with jQuery, as well as a pure CSS version.

HTH