0 votes

Problème avec la sélection d'onglet dans JQuery

J'ai le problème suivant :

Je veux créer une page web dans laquelle je peux utiliser les onglets JQuey à la fois par une barre latérale et par la barre de boutons supérieure des onglets JQuey eux-mêmes. J'utilise le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>title here</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.datepicker.js"></script>
        <script type="text/javascript" src="ui.tabs.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="local.css" />
        <script type="text/javascript">
            $(document).ready(function(){
            $("#datepicker").datepicker();
        });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tabs").tabs();
            });
            $("select2").click(function() { // bind click event to link
                $("$tabs").tabs("select", 1); // switch to third tab
                return false;
            });
        </script>
    </head>

<body>
    <div id="container">
        <div id="row">
            <div id="leftsubcontainer"><div class="column-in">
                <h4>rev0.1</h4>
                <p>medewerkernaam</p>
                <br/>
                <div type="text" id="datepicker"></div>
                <br/><br/>
                <br/><br/>
                <p>log out</p>
                <button id="select2">kies derde</button>
                <br/><br/>
            </div></div>
            <div id="rightsubcontainer"><div class="column-in">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Nunc tincidunt</a></li>
                        <li><a href="#tabs-2">Proin dolor</a></li>
                        <li><a href="#tabs-3">Aenean lacinia</a></li>
                    </ul>
                    <div id="tabs-1">
                        <p>tekst1</p>
                    </div>
                    <div id="tabs-2">
                        <p>tekst 2</p>
                    </div>
                    <div id="tabs-3">
                        <p>tekst 3</p>
                    </div>
                </div>

            </div></div>
        </div>
    </div>
</body>

Le problème est que, lorsque je clique sur le bouton, les onglets ne changent pas (c'est-à-dire qu'il ne sélectionne pas le bon onglet). L'un d'entre vous sait-il ce que j'ai fait de mal ?

J'espère avoir de vos nouvelles,

Cordialement, Jeroen

1voto

Steerpike Points 5937

Vous avez quelques fautes de frappe et des problèmes avec vos sélecteurs qui vous gênent. Remplacez votre code javascript par le suivant

$(document).ready(function() {
    var $tabs = $("#tabs").tabs();
    $("#select2").click(function() {
        // bind click event to link
        $tabs.tabs("select", 1); // switch to second tab
        return false;
    });
});

Cela devrait fonctionner.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X