任何幻灯片更改类答案

【问题标题】：anythingSlide change class任何幻灯片更改类
【发布时间】：2011-03-06 21:30:50
【问题描述】：

我正在使用anythingSlide，我想为其添加一个额外的功能，

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

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

我还在学习jquery，只是还没弄明白，希望你们中的哪位能帮我一下？

【问题讨论】：

标签： jquery addclass anythingslider

【解决方案1】：

不清楚你到底想做什么，但你可以添加一个回调来添加你想要的类。

如果您不知道，当前导航链接添加了“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);
    }
});

【讨论】：

您好，感谢您的快速回答！看起来你在正确的轨道上..我试着解释得更好......滑块中的每个菜单项都会有不同的样式类，所以 menu1 = .bg1 menu2 = .bg2 等等你点击menu2，它不仅将cur类添加到菜单中，而且将另一个div的类（即.background）更改为.bg2！ .background 与滑块无关，它只是页面上的另一个 div。希望这会有所帮助？？
好的，我已经更新了我的答案。也许这更符合您的要求？
干杯福吉！！这正是我一直在寻找的......但有一件事可能只是添加错误？在给我的脚本中，我也有 navigationFormatter，它将 txt 添加到导航中，它如何使用导航名称更改类！
嗨，改用这个var bg = slider.$nav.find('a').index(slider.$nav.find('.cur')) + 1;