IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Code html et JavaScript, créer une page de navigation


Sujet :

JavaScript

  1. #1
    Membre averti
    Inscrit en
    Décembre 2008
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 51
    Par défaut Code html et JavaScript, créer une page de navigation
    voila mon problème et le suivant j'ai créer une page de navigation (pagination d'article) c-a-d Split l'article en 5 page avec option refréch de la page mais , le problème quand j'ai insérer la photos avec l'article quand je click sur 2 c-a-d aller a la page suivant .
    l'article de la 1er page me parti sous l'image 2 de la page 2, et ainsi de suite pour la page 3 et 4 et 5
    le code j'ai le insérer sous Blogger HTML voila le code merci de m'aider .
    je voudrais quand je clic sur 2 (page 2) le texte de l’article 1 disparu
    et quand je Click sur la page 3 le 1 et le 2 disparu et ainsi
    merci
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <style>
    .button-box{margin:30px 0;text-align:center;}
    #page1,#page2,#page3,#page4,#page5{display:none}
    #page1.current{display:block}
    a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
    a.button-pager.current{background:#333;color:#fff;}
    </style>
     
    <div id='topcontent'></div>
     
    <div id="page1" class="current">
    <center>
    <a href="http://zupimages.net/viewer.php?id=18/47/wawm.jpg"><img src="https://zupimages.net/up/18/47/wawm.jpg" alt="" /></a>
    </center>
    </div>
    <div>
    11111111111111111111111111111
    </div>
    <div id="page2">
    <center>
    <a href="http://zupimages.net/viewer.php?id=18/47/d1hw.jpg"><img src="https://zupimages.net/up/18/47/d1hw.jpg" alt="" /></a>
    </center>
    </div>
    <div>
    222222222222222222222222222222
    </div>
    <div id="page3">
    <center>
    <a href="http://zupimages.net/viewer.php?id=18/47/az3p.jpg"><img src="https://zupimages.net/up/18/47/az3p.jpg" alt="" /></a>
    </center>
    </div>
    <div>
    333333333333333333333333333333333
    </div>
    <div id="page4">
    <center>
    <a href="http://zupimages.net/viewer.php?id=18/47/kmlq.jpg"><img src="https://zupimages.net/up/18/47/kmlq.jpg" alt="" /></a>
    </center>
    </div>
     
    <div id="page5">
    <center>
    <a href="http://zupimages.net/viewer.php?id=18/47/260h.jpg"><img src="https://zupimages.net/up/18/47/260h.jpg" alt="" /></a>
    </center>
    </div>
     
    <div class="button-box">
    <a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
    <a class="button-pager" id="button2" href="?page2#topcontent">2</a>
    <a class="button-pager" id="button3" href="?page3#topcontent">3</a>
    <a class="button-pager" id="button4" href="?page4#topcontent">4</a>
    <a class="button-pager" id="button5" href="?page5#topcontent">5</a>
    </div>
    <script>
    //<![CDATA[
    var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
    //]]>
    </script>
    Merci les amis
    Images attachées Images attachées  

  2. #2
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
      var
        p1 = document.getElementById("page1"),
        p2 = document.getElementById("page2"),
        p3 = document.getElementById("page3"),
        p4 = document.getElementById("page4"),
        p5 = document.getElementById("page5"),
        b1 = document.getElementById("button1"),
        b2 = document.getElementById("button2"),
        b3 = document.getElementById("button3"),
        b4 = document.getElementById("button4"),
        b5 = document.getElementById("button5")
      ;
      window.location.href.search("page1") > 0 && (p1.style.display = "block", p1.classList.add("current"), b1.classList.add(
            "current"), p2.style.display = "none", p2.classList.remove("current"), b2.classList.remove("current"), p3.style
          .display = "none", p3.classList.remove("current"), b3.classList.remove("current"), p4.style.display = "none", p4.classList
          .remove("current"), b4.classList.remove("current"), p5.style.display = "none", p5.classList.remove("current"), b5
          .classList.remove("current")), window.location.href.search("page2") > 0 && (p1.style.display = "none", p1.classList
          .remove("current"), b1.classList.remove("current"), p2.style.display = "block", p2.classList.add("current"), b2.classList
          .add("current"), p3.style.display = "none", p3.classList.remove("current"), b3.classList.remove("current"), p4.style
          .display = "none", p4.classList.remove("current"), b4.classList.remove("current"), p5.style.display = "none", p5.classList
          .remove("current"), b5.classList.remove("current")), window.location.href.search("page3") > 0 && (p1.style.display =
          "none", p1.classList.remove("current"), b1.classList.remove("current"), p2.style.display = "none", p2.classList.remove(
            "current"), b2.classList.remove("current"), p3.style.display = "block", p3.classList.add("current"), b3.classList
          .add("current"), p4.style.display = "none", p4.classList.remove("current"), b4.classList.remove("current"), p5.style
          .display = "none", p5.classList.remove("current"), b5.classList.remove("current")), window.location.href.search(
          "page4") > 0 && (p1.style.display = "none", p1.classList.remove("current"), b1.classList.remove("current"), p2.style
          .display = "none", p2.classList.remove("current"), b2.classList.remove("current"), p3.style.display = "none", p3.classList
          .remove("current"), b3.classList.remove("current"), p4.style.display = "block", p4.classList.add("current"), b4.classList
          .add("current"), p5.style.display = "none", p5.classList.remove("current"), b5.classList.remove("current")),
        window.location.href.search("page5") > 0 && (p1.style.display = "none", p1.classList.remove("current"), b1.classList
          .remove("current"), p2.style.display = "none", p2.classList.remove("current"), b2.classList.remove("current"), p3
          .style.display = "none", p3.classList.remove("current"), b3.classList.remove("current"), p4.style.display =
          "none", p4.classList.remove("current"), b4.classList.remove("current"), p5.style.display = "block", p5.classList.add(
            "current"), b5.classList.add("current"));

    ça sort d'ou ? en l'état c'est une torture pour juste le lire.

  3. #3
    Membre averti
    Inscrit en
    Décembre 2008
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 51
    Par défaut
    Cher ami merci pou votre réponse.
    Je ne suis pas français mais portugais.

  4. #4
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    voila qui devrait t'avancer..

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8" />
    <title> pagine </title>
    <style>
      section {
        display: none
      }
      section.current {
        display: block
      }
      #buttons-box {
        margin: 30px 0;
        text-align: center;
      }
      #buttons-box > a {
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin: 0 5px 0 0;
        text-align: center;
        background: #ddd;
        color: #333;
        cursor: pointer;
        display: inline-block;
      }
      #buttons-box > a.current {
        background: #333;
        color: #fff;
      }
    </style>
    </head>
    <body >
     
      <section id="page_1" class="current">
          page_1
      </section>
     
      <section id="page_2">
          page_2
      </section>
     
      <section id="page_3">
          page_3
      </section>
     
      <section id="page_4">
          page_4
      </section>
     
      <section id="page_5">
          page_5
      </section>
     
      <div id="buttons-box">
        <a data-page="page_1" href="#" class="current" >1</a>
        <a data-page="page_2" href="#">2</a>
        <a data-page="page_3" href="#">3</a>
        <a data-page="page_4" href="#">4</a>
        <a data-page="page_5" href="#">5</a>
      </div>
     
      <script>
        document.getElementById('buttons-box').onclick = function(e) {
          if (!e.target.matches('a')) return;
          document.querySelectorAll('.current').forEach(elm => elm.className=''); 
          e.target.className = "current";
          document.getElementById(e.target.dataset.page).className = "current";
          window.scrollTo(0,0);
        }
      </script>
    </body>
    </html>

Discussions similaires

  1. [PHP-JS] Créer une page html avec PHP5
    Par kaiser59 dans le forum Langage
    Réponses: 23
    Dernier message: 29/01/2008, 17h38
  2. intégration de code javascript dans une page asp.net
    Par Je-cherche-pfe dans le forum Général Dotnet
    Réponses: 1
    Dernier message: 06/09/2007, 17h10
  3. Intégrer du code compilé par GWT dans une page html
    Par leynilegur dans le forum GWT et Vaadin
    Réponses: 5
    Dernier message: 26/08/2007, 21h27
  4. Réponses: 7
    Dernier message: 14/05/2007, 16h31
  5. [Débutant] Créer une page HTML qui valide des attributs
    Par sebpsi dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/03/2007, 12h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo