www.webdeveloper.com
Results 1 to 2 of 2

Thread: Make nav links stay active until another nav link is clicked

  1. #1
    Join Date
    Jan 2009
    Location
    Minneapolis
    Posts
    36

    Make nav links stay active until another nav link is clicked

    Hi there,

    I'm developing a one page site and I have a fixed navigation at the top. The nav links scroll to different sections on the page.

    I'd like a nav link that is clicked to stay in its active state until another link on the page is clicked.

    Anyone know an easy way to make a link stay in its active state until another link is clicked?

    Thanks!
    Dave Dechant - faceyourdesign.com

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Links</title>
    <style type='text/css'>
    body{font-family:Georgia,Verdana,Arial;font-size:13px;background:#fff;color:#000;padding:30px 0px 0px 30px;margin:0px 0px 0px 0px;}
    a.menu_idle{color:#000;background-color:transparent;text-decoration:none;font-weight:bold;}
    a.menu_active{color:Crimson;background-color:transparent;text-decoration:none;font-weight:bold;letter-spacing:5px;font-style:italic;}
    </style>
    <script type="text/javascript">
    function hlite_menu(obj){
    var lnk=document.getElementById('menu').getElementsByTagName('A');
    for(var i in lnk){lnk[i].className=(lnk[i]===obj)?'menu_active':'menu_idle';}
    }
    
    function set_menu(){
    var lnk=document.getElementById('menu').getElementsByTagName('A');
    for(var i in lnk){lnk[i].className='menu_idle';lnk[i].onclick=function(){hlite_menu(this);}}
    }
    
    window.onload=set_menu;
    </script>
    </head> 
    <body>
    <div id="menu">
    <a href="#null">link 1</a><br />
    <a href="#null">link 2</a><br />
    <a href="#null">link 3</a><br />
    <a href="#null">link 4</a><br />
    <a href="#null">link 5</a>
    </div>
    </body> 
    <html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles