.cycle jquery, utilisez le bouton pour afficher la div sélectionnée (par identifiant ou classe)?

Question

Je suis nouveau à jquery alors s'il vous plaît restez avec moi et soyez doux.

Je l'ai utilisé le code .cycle comme la navigation et je voudrais cliquer sur un bouton-à-dire « sur nous » et il vous amène à la div contenant les « sur nous » contenu

Je possède ce travail mais j'ai remarqué que j'ai perdu mon animation, je sais quel est le problème mais à cause de mon manque de connaissance je ne sais pas comment le réparer et ces forums ont été bons pour moi apprendre ce code, donc j'ai pensé que je demanderais.

Voici le code javascript que j'ai, comme je dis, cela fonctionne et me détourne vers le div choisi, ce qu'il ne fait pas est de montrer l'effet de diapositive plus. J'aimerais aussi montrer et cacher les divs.

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

Voici le code 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> 

et juste Incase, voici le 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; 
} 

Merci

Answer 1

jamais utilisé le plugin Cycle, mais en fonction de la documentation et des démos disponible, vous pouvez accéder à une diapositive spécifique en appelant le .cycle(index).

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

Jetez un oeil à 'goto slide' demo et Another 'goto' demo (aka: Poor-man's pager).

MISE À JOUR

Vous pouvez utiliser index() pour obtenir la position du premier élément dans l'objet jQuery par rapport à ses éléments frères.

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

Quelque chose encore plus compliqué que de taper l'index vous est de créer des liens avec des classes et un gestionnaire d'événements click pour chaque lien et toboggan.

Vous devriez essayer quelque chose comme ça à la place;

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

avec; Notez que j'ai écrit cet exemple pour illustrer le concept et qu'il n'a pas été testé.

MISE A JOUR 2

Assurez-vous que vous êtes en utilisant HTML valide. Commencez avec une configuration de base et avancez de cela.

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

Voir mon jsFiddle demo.