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

Version imprimable

1 pièce(s) jointe(s)

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:

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

Code:

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.

25/11/2018, 19h01
nasr_live

Cher ami merci pou votre réponse.
Je ne suis pas français mais portugais.

voila qui devrait t'avancer..

Code:

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>