.cycle jquery、選択したdivを表示するには、ボタンを使用します（IDまたはクラスによる）？

Question

私はjqueryに新しいので、私と一緒に滞在し、優しいしてください。

私は、ナビゲーションとして.cycleコードを使用していると私は、すなわち、「私たちについて」ボタンをクリックしたいと思いますし、それは、「私たちについて」の内容

私はこの作業を持っているを含むdiv要素にあなたを取りますしかし、私はアニメーションを失っていることに気づいたが、私は問題が何かを知っているが、私の知識の欠如のため、私はそれを修正する方法を知らないし、これらのフォーラムは私にこのコードを習っていたので、私は尋ねると思った。

これは、私が言っているように、これは動作し、選択されたdivに私を迂回させる、それは何もしないスライド効果を表示することです。私はdivを表示したり隠したりしたいと思っています。ここで

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
    $('#container').cycle({ 
     fx: 'scrollHorz', 
     speed: 'fast', 
     timeout: 0, 
    }); 
    jQuery('.index_navigation_1').click(function() { 
     window.location.href = '#about_us_container'; 
     return false; 
    }); 
    jQuery('.index_navigation_2').click(function() { 
     window.location.href = '#contact_us_container'; 
     return false; 
    }); 
}); 
</script> 

は、HTMLコード

<div id ="container"> 
    <div id="index_container"> 
    <div id="header">home</div> 
    <div id="index_navigation"> 
     <div id="nav_buttons" class="index_navigation_1">ABOUT US</div> 
     <div id="nav_buttons" class="index_navigation_2">CONTACT US</div> 
     <div id="nav_buttons" class="index_navigation_3">BUTTON 3</div> 
     <div id="nav_buttons" class="index_navigation_4">BUTTON 4</div> 
    </div> 
    <div id ="about_us_container"> 
    <div id="header">about us</div> 
    </div> 
    <div id="navigation"> 
     <div id="nav_buttons" class="about_us_navigation_1">ABOUT US BUTTON 1</div> 
     <div id="nav_buttons" class="about_us_navigation_2">ABOUT US BUTTON 2</div> 
     <div id="nav_buttons" class="about_us_navigation_3">ABOUT US BUTTON 3</div> 
     <div id="nav_buttons" class="about_us_navigation_4">ABOUT US BUTTON 4</div> 
     <div id="nav_buttons" class="about_us_navigation_5">ABOUT US BUTTON 5</div> 
    </div> 
    <div id="contact_us_container"> 
     <div id="header">contact us</div> 
    </div> 
    <div id="navigation"> 
     <div id="nav_buttons" class="contact_us_navigation_1">CONTACT US BUTTON 1</div> 
     <div id="nav_buttons" class="contact_us_navigation_2">CONTACT US BUTTON 2</div> 
     <div id="nav_buttons" class="contact_us_navigation_3">CONTACT US BUTTON 3</div> 
     <div id="nav_buttons" class="contact_us_navigation_4">CONTACT US BUTTON 4</div> 
     <div id="nav_buttons" class="contact_us_navigation_5">CONTACT US BUTTON 5</div> 
    </div> 
    </div> 
</div> 

で、ちょうど包み、ここでCSS

#container { 
    height:417px; 
    width: 320px; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #FFF; 
} 
#scroll_container { 
    height:417px; 
    width: 320px; 
    background-color: #0FF; 
} 
#index_navigation { 
    background-color: #EC008C; 
    width: 320px; 
} 
#navigation { 
    background-color: #EC008C; 
    width: 320px; 
} 
#nav_buttons { 
    height: 60px; 
    width: 320px; 
    background-image: url(images/buttons/pink_button.svg); 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 22px; 
    line-height: 60px; 
    color: #FFF; 
    text-align: center; 
} 
#header { 
    background-color: #9CF; 
    height: 177px; 
    width: 320px; 
} 

おかげ

Answer 1

は、プラグインのサイクルを使用していないが、ドキュメントやデモに応じて決して利用可能な場合は、.cycle(index)に電話して特定のスライドに行くことができます。

$('.index_navigation_1').click(function() { 
    $('#container').cycle(1); 
    return false; 
}); 

は'goto slide' demoとAnother 'goto' demo (aka: Poor-man's pager)をよく見てください。

UPDATE

あなたは、その兄弟要素にjQueryオブジェクトの相対内の最初の要素の位置を取得するためにindex()を利用することができます。

$('#container').find('#about_us_container').index() 

さらに複雑自分でクラスと各リンクとスライド用に別のclickイベントハンドラとのリンクを作成することであるインデックスを入力するよりも何か。

代わりにこのようなものを試す必要があります。

$('.goToSlide').click(function(e) { 
    e.preventDefault(); 
    var selector = $(this).data('slide'); 
    var slideIndex = $(selector).index(); 
    $('#container').cycle(slideIndex); 
}); 

と;

<a href="#" class="goToSlide" data-slide="#about_us_container">Goto #about_us_container</a> 
<a href="#" class="goToSlide" data-slide="#contact_us_container">Goto #contact_us_container</a> 

この例では概念を説明し、テストされていないことに注意してください。

UPDATE 2

有効なHTMLを使用して確認you'reしてください。基本的な設定から始めて、それから進めてください。

$('#slide_containers').cycle({ 
    fx: 'scrollHorz', 
    speed: 'fast', 
    timeout: 0 
}); 

$('.goToSlide').click(function(e) { // Bind click event to all elements with the class goToSlide 
    e.preventDefault(); 
    var selector = $(this).data('slide'); // Get the data-slide attribute value 
    //console.log(selector, $(selector), $(selector).index()); // DEBUG 
    var slideIndex = $(selector).index(); // Get the index of the slide element 
    $('#slide_containers').cycle(slideIndex); // Cycle to slide by index 
});​ 

私のjsFiddle demoを参照してください。