任何滑动改变类

时间:2011-03-05 17:21:55

标签: jquery addclass anythingslider

我正在使用anySlide,我想为它添加一个额外的功能,

基本上在导航上我希望能够更改菜单项的css类,

因此,如果单击菜单项1,它也会使用addclass函数更改div的css类,单击它会移动滑块并交换div类。

我还在学习jquery,我还没想到它,我希望你们中的一个可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

目前尚不清楚你想要做什么,但你可以添加一个回调来添加你想要的课程。

如果您不知道,当前导航链接添加了“cur”类。你可以使用那个类来做你额外的造型。

此代码会将“当前”类添加到链接周围的<li>

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

所以你的HTML看起来像这样:

<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>

更新:好的,试试这个......这里是demo

HTML

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

脚本

$('#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);
    }
});