$().tabs ne fonctionne pas

**ctuchik** · 14/11/2014, 09h30

Bonjour, je bosse actuellement sur un site web et j'utilise jquery et jqueryUI.

J'ai lu un tuto.

Et mon code ne fonctionne pas.
HTML:

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
<!doctype html>
<html lang ="fr">
<head>
    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="home.css">
    <script src="script.js" type="text/JavaScript"></script>
</head>
<body>
<div id="onglets">
        <ul>
            <li><a href="#onglet-1">titre onglet 1</a></li>
            <li><a href="#onglet-2">titre onglet 2</a></li>
            <li><a href="#onglet-3">titre onglet 3</a></li>
            <li><a href="#onglet-4">titre onglet 4</a></li>
            <li><a href="#onglet-5">titre onglet 5</a></li>
            <li><a href="#onglet-6">titre onglet 6</a></li>
            <li><a href="#onglet-7">titre onglet 7</a></li>
        </ul>
        <div id="onglet-1">
            blafdqqevtccrt
        </div>
        <div id="onglet-2">
            moi,nnlyliu;py,
        </div>
        <div id="onglet-3">
            mdfmsfdqgklkjl
        </div>
        <div id="onglet-4">
            apoêap^pofmkklfq
        </div>
        <div id="onglet-5">
            paêproidmlsfùkqsdm
        </div>
        <div id="onglet-6">
            oigfc526x
            ge263crt8zea
        </div>
        <div id="onglet-7">
            ezraoigdlnx,q:qez tv756
        </div>
    </div>
</body></html>

Jquery:

Code :

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

1
2
3
$(document).ready(function(){
        $('#onglets').tabs();
    });

Dans l'inspecteur d'élément sur ma page j'ai bien ca, mais ca n'affiche qu'une liste non ordonnée de lien:

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
<div id="onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"></li>
 
<li class="ui-state-default ui-corner-top"></li>
 
<li class="ui-state-default ui-corner-top"></li>
 
<li class="ui-state-default ui-corner-top"></li>
 
<li class="ui-state-default ui-corner-top"></li>
 
<li class="ui-state-default ui-corner-top"></li>
 
<li class="ui-state-default ui-corner-top"></li>

A savoir que j'ai d'autres fonctions jqueryUI et qu'elles fonctionnent très bien. Et la console n'affiche rien.

Je voudrai savoir où est mon erreur s'il vous plait.

Bonne journée.

**danielhagnoul** · 14/11/2014, 21h08

Bonsoir

Vous n'utilisez pas la feuille de style UI et vous chargez des versions totalement obsolètes de jQuery et de jQuery UI.

Je vous conseille d'utiliser le chargeur de code jQuery (CDN) :

Code :

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

1
2
3
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/sunny/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

Sinon, voir : http://jquery.com/download/ et http://jqueryui.com/download/

**ctuchik** · 14/11/2014, 23h12

Merci beaucoup danielhagnoul

.

$().tabs ne fonctionne pas [UI]

jQuery

Discussions similaires

Partager

Partager