thanks so much for the reply!
I was able to apply the class but was unable to figure out how to
remove the existing active class on other links. I'll try this out.
Again, thanks so much!
On May 4, 7:48 am, Nathan <nsear...@gmail.com> wrote:
> 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');
> > });
