Jquery menu and button selection

Question

I am trying to use jquery to build a top navigation. When a link button/menu is selected the button should be higlighted and display the selected item and when its goes to that page selected.

Is there anyway to do this. I have this script it kinda works but not completely.

    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ 
        $('#hdcnav ul li a').click(function() {
                $('#hdcnav ul').find('img').each(function(){
                var imgsrc = $(this).attr('src');
                if(imgsrc.indexOf('selected')>=0){$(this).attr('src',imgsrc.split('-')[0]+".gif");}
                });
                $(this).find('img').attr('src',$(this).find('img').attr('src').split('.')[0]+"-selected.gif");
            });
    }); 
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="page1.html"><img src="images2.gif" alt="home" /></a></li>
            <li><a href="page2.html"><img src="images3.gif" alt="" /></a></li>
            <li><a href="page3.html"><img src="images4.gif" alt="" /></a></li>
            <li><a href="#"><img src="images4.gif" alt="" /></a></li>
            <li><a href="#"><img src="images5.gif" alt="" /></a></li>
            <li><a href="#"><img src="images6.gif" alt="" /></a></li>
        </ul>
    </div>

JasCav · Accepted Answer · 2010-07-20 16:20:40Z

1

One thing that I've done that works is to add and remove the classes based on the selection (a click in this case) which is ver easy and straight-forward to do. I then use CSS to use a different image on a selected class so that it appears different than the other menu items around it.

answered Jul 20, 2010 at 16:20

JasCav

34.6k21 gold badges117 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

Agreed, CSS sprites are the way to go.

Collectives™ on Stack Overflow

Jquery menu and button selection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related