anythingSlide change class

I am using anythingSl开发者_StackOverflow社区ide and I would like to add an extra function to it,

Basically on the navigation I would like to be able to change a css class for the menu item,

So if you click on menu item 1 it also change the css class of a div using the addclass function, on click it moves the slider and also swaps the a div class.

I am still learning jquery and I just haven't figured it out yet, I am hoping one of you can help me out here?

It's not clear exactly what you want to do, but you could add a callback to add the class you want.

In case you didn't know, the current navigation link has the "cur" class added to it. You could just use that class to do your extra styling.

This code will add the "current" class to the <li> surrounding the link:

$('#slider').anythingSlider({
  onSlideComplete : function(slider){
    slider.$nav  // UL of the navigation list
      .find('li').removeClass('current')
      .find('.cur').parent().addClass('current');
  }
});

so your HTML will look something like this:

<ul class="thumbNav"> <!-- this is the slider.$nav -->
  <li class="first">
    <a href="#" class="panel1">1</a>
  </li>
  <li class="current"> <!-- this is the current panel -->
    <a href="#" class="panel2 cur">2</a>
  </li>
  <li>
    <a href="#" class="panel3">3</a>
  </li>
  <li>
    <a href="#" class="panel4">4</a>
  </li>
  <li>
    <a href="#" class="panel5">5</a>
  </li>
  <li class="last">
    <a href="#" class="panel6">6</a>
  </li>
</ul>

Update: Ok, try this... and here's a demo

HTML

<div id="background" class="bg1"></div>

Script

$('#slider').anythingSlider({
    onSlideComplete: function(slider){
        // get text, or you could use index()
        var bg = $.trim( slider.$nav.find('.cur').text() );
        // replace entire class
        $('#background').attr('class', 'bg' + bg);
    }
});