SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change the page content by clicking on menu option

    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.

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Welcome to the forums

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •