jquery - 何でもスライド変更クラス

Question

私はanythingSlideを使用しており、それに余分な機能を追加したいと考えています.

基本的にナビゲーションでは、メニュー項目のcssクラスを変更できるようにしたいのですが、

したがって、メニュー項目 1 をクリックすると、addclass 関数を使用して div の css クラスも変更されます。クリックすると、スライダーが移動し、div クラスもスワップされます。

私はまだjqueryを学んでいますが、まだ理解できていません.誰かが私を助けてくれることを願っています.

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

---

更新：わかりました、これを試してください...そしてここにデモがあります

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);
    }
});