Discussion :

[nasr_live]

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