If I understand you both correctly.
You'll need to add a class of active to the clicked nav item and
remove the class active from the nav item the was previously active.
You can do this with:
$(function(){
$('#nav li a').click(function(){
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
});
$('#nav li a').click - Gets the click.
$('#nav li a').removeClass('active') - Removes the class active from
all #nav li a
$(this).addClass('active') - The 'this' in that statement defines the
#nav li a that was clicked
On May 3, 12:24 pm, jQnoob <pardiz...@gmail.com> wrote:
> I'm also having this problem. I'm using localscroll on a one-page
> site and need to add an active state to the navigation items. the
> problem is, it doesn't seem to work with local anchors. Not sure if it
> matters, but I also have sticky header and footer.
>
> Here's some example code:
>
> HTML:
> <div id="header">
> <ul id="nav">
> <li id="nav_logo"><a href="/"><h4>logo</h4></a></li>
> <li id="nav_capleft"><a href="#"></a></li>
> <li id="nav_home"><a href="#home">home</a></li>
> <li id="nav_about"><a href="#about">about</a></li>
> <li id="nav_portfolio"><a href="#portfolio">portfolio</a></li>
> <li id="nav_contact"><a href="#contact">contact</a></li>
> <li id="nav_capright"><a id="icon-rss" href="#"><h4>rss</h4></
> a><em>Subscribe to our RSS Feed</em></li>
> <li id="nav_search"></li>
> </ul>
> <!-- end #header --></div>
>
> JSCRIPT:
> jQuery(function( $ ){
>
> // Scroll the x axis
> $.localScroll.defaults.axis = 'x';
>
> // Scroll if there's a hash (#something) in the url
> $.localScroll.hash({
> target: '#content', // Could be a selector or a jQuery object
> too.
> queue:true,
> duration:1500
> });
>
> /**
> * NOTE: I use $.localScroll instead of $('#navigation').localScroll
> () so I
> * also affect the >> and << links. I want every link in the page to
> scroll.
> */
> $.localScroll({
> target: '#content', // could be a selector or a jQuery
> obje8¶ct too.
> queue:true,
> duration:1000,
> hash:true,
> onBefore:function( e, anchor, $target ){
> // The 'this' is the settings object, can be modified
> },
> onAfter:function( anchor, settings ){
> // The 'this' contains the scrolled element (#content)
> }
> });
>
> $(function(){
> var path = location.pathname.substring(1);
> if ( path )
> $('ul#nav li a...@href$="' + path + '"]').attr('class', 'active');
> });
