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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
  •