Naviguation - Affichage de pages Jquery

kenshimdev
Javascript

Bonjour,

Je viens à vous aujourd'hui car je me suis mis récemment à la création d'application sous android via APACHE CORDOVA. Je tiens d'ailleurs à remercier @Grafikart pour ces tutoriels sur l'utilisation de ce dernier.

J'ai créer un page .html avec 4 "onglets" nommé :

  • Home
  • DevBlog
  • Twitter
  • Youtube

À partir de ces "onglets" dans ma barre de navigations j'allais à différents endroits de ma page. J'utilisais simplement les ancres en html et utilisait une animation en CSS qui déplacait mes div sur la gauche de sorte à ce qu'on la voit (c'est très sale... oui).

Je viens à vous pour vous demander une autre alternative mais tout via Jquery. J'aimerai lorsque je clique sur mes différents "onglets", le contenu au centre de ma page change. J'aimerai charger une autre div. /!\ Tout est sur une seule et même page ! /!\

PS : Excusez-moi des fautes.. y comprit celle du titre :P
Merci à ceux qui seront m'aider, bonne journée.
Kenshim'

8 réponses

ToToSe
Réponse acceptée

Tu peu utiliser jquery et jouer avec la propriété css display pour afficher le contenue d'une div ou d'une autre selon l'onglet que tu a cliquer, et pourquoi pas utiliser les fonction fadeIn()/fadeOut() pour animer le tout :)

<div id="menu">
    <a href="#" divToShow="contenue1">Menu du contenue 1</a>
    <a href="#" divToShow="contenue2">Menu du contenue 2</a>
    <a href="#" divToShow="contenue3">Menu du contenue 3</a>
</div>
<div id="monSite">
    <div id="contenue1" class="show">Contenue de mon site n°1 !</div>
    <div id="contenue2" style="display:none;">Contenue de mon site n°2 !</div>
    <div id="contenue3" style="display:none;">Contenue de mon site n°3 !</div>
</div>
$( "#menu a" ).click(function() {
    elementToFadeIn = $(this).attr('divToShow');
    $('.show').fadeOut(function(){
        $(this).removeClass('show');
        $('#'+elementToFadeIn).fadeIn(function(){
            $(this).addClass('show');
        });
    });
});

Petit jsfiddle pour illustrer le tout ! :)

ToToSe

Yop!
Tu veux pouvoir passer d'une page a une page sans devoir recharger ton site ?
Si c'est le cas, redirige toi vers la fonction load de jquery :)

Lartak

Bonjour.

Tu veux pouvoir passer d'une page a une page sans devoir recharger ton site ?

Bien que le titre de son sujet soit trompeur, sa demande est :

J'aimerai lorsque je clique sur mes différents "onglets", le contenu au centre de ma page change. J'aimerai charger une autre div. /!\ Tout est sur une seule et même page ! /!\

Tu fais un site One Page ?

kenshimdev
Auteur

Oui, je me suis rendu compte après coup que mon titre était trompeur, excusez-moi :) !
Je fais un site qui tient uniquement sur une seule page html nommé : index.html
J'ai 4 divs et 4 onglets(href) et j'aimerai affiché une div en fonction de l'onglet que j'ai cliqué.

J'espère que c'est plus clair ;)

kenshimdev
Auteur

Merci beaucoup !
C'est exactement ce que je cherche et franchement c'est super ! Merci beaucoup :)
Je test ça dès que je suis à la casa :3

kenshimdev
Auteur

Parfait, ça fonctionne correctement mais en revanche ma div devblog n'arrive pas à charger ça :

$.ajax({
    type: 'GET',
    url: 'http://haekin.fr/mobile/json/',
    crossDomain: true,
    dataType: 'html',
    success: function(responseData, textStatus, jqXHR) 
    {
        createDisplayFromJSON(responseData);
    },
        error: function (responseData, textStatus, errorThrown) 
    {
        console.warn(responseData, textStatus, errorThrown);
        alert('CORS failed - ' + textStatus);
    }
});

function createDisplayFromJSON(json){
                var final_display = "";
                var news_object = JSON.parse(json)["news"];

            var arr = $.each(news_object, function(key, value) 
            { 

            $.each(value, function(key2, value2) 
            { 
                //alert(key2 + " -> " + value2);
                final_display += "<p>" + value2 + "</p>";
            });

            final_display += "<br><br><br><br>";
        });

        $("#devblogContent").html(final_display);
}
ToToSe

Re!
Ca fonctionne très bien sur fiddle :)

kenshimdev
Auteur

Merci ! Tout fonctionne parfaitement au final :) !