lien vers mon jquery

**chezdevelopping** · 25/11/2009, 15h14

bonjour je teste mon premier test avec jquery mais ça marche pas.
lorsque je lance mon fichier je vois aucun effet apporté par le javascript.

mes fichiers sont

index.html

Code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<title>Mon site</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" /> 
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/myjavascript.js"></script>
</head>
 
<body>   
<div id="onglets"> 
    <h1>Onglets</h1> 
    <ul> 
        <li><a href="#onglet_1">Lorem ipsum</a></li> 
        <li><a href="#onglet_2">Pan</a></li> 
        <li><a href="#onglet_3">Onglet 3</a></li> 
    </ul> 
    <div class="onglet" id="onglet_1"> 
        <h3>Onglet 1</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    </div> 
    <div class="onglet" id="onglet_2"> 
        <h3>Onglet 2</h3> 
        <p>Portez ce vieux whisky au juge blond qui fume.</p> 
    </div> 
    <div class="onglet" id="onglet_3"> 
        <h3>Onglet 3</h3> 
        <p>Voix ambigüe d'un cœur qui, au zéphyr, préfère les jattes de kiwis.</p> 
    </div> 
</div> 
</body>
</html>

et myjavascript.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(function(){ 
    $("#onglets .onglet").hide(); 
    $("#onglets .onglet:eq(0)").show(); 
});

jquery.js et myjavascript.js se trouvent dans un dossier lib situé dans le méme repertoire que index.php

**danielhagnoul** · 26/11/2009, 00h56

Bonsoir.

Voici un exemple :

Code :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
 
        /* TEST */
        div.onglet {
            display:none;
            border:1px solid red;
            margin:12px;
            padding:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#onglets .onglet:first").show(); 
 
            $("#onglets a").click(function(){
                $("#onglets .onglet").hide();
 
                $("#"+this.href.split("#")[1]).toggle();
            });
         });
     </script>
</head>
<body>
    <div id="conteneur">
 
        <div id="onglets"> 
            <h1>Onglets</h1> 
            <ul> 
                <li><a href="#onglet_1">Lorem ipsum</a></li> 
                <li><a href="#onglet_2">Pan</a></li> 
                <li><a href="#onglet_3">Onglet 3</a></li> 
            </ul>
 
            <div id="onglet_1" class="onglet"> 
                <h3>Onglet 1</h3> 
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
            </div>
 
            <div  id="onglet_2" class="onglet"> 
                <h3>Onglet 2</h3> 
                <p>Portez ce vieux whisky au juge blond qui fume.</p> 
            </div>
 
            <div id="onglet_3" class="onglet"> 
                <h3>Onglet 3</h3> 
                <p>Voix ambigüe d'un cœur qui, au zéphyr, préfère les jattes de kiwis.</p> 
            </div> 
        </div>
 
    </div>
</body>
</html>

lien vers mon jquery

jQuery

Discussions similaires

Partager

Partager