2009-03-06 8 views
0

J'ai le problème suivant:Problème avec onglet-sélection dans JQuery

Je veux créer une page Web où je peux utiliser les onglets jQuery à la fois par un côté bar et par le bouton supérieur-barre de la jQuery onglets lui-même. Je suis en utilisant 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> 
</html> 

Le problème est que, chaque fois que je clique sur le bouton, les onglets ne changent pas (à savoir qu'il ne sélectionne pas l'onglet à droite). Est-ce que quelqu'un parmi vous sait ce que j'ai fait de mal?

l'espoir d'entendre de vous tous,

salutations les, Jeroen

Répondre

1

Vous avez quelques fautes de frappe et des problèmes avec vos sélecteurs qui devient de la manière. repalce votre code javascript avec 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 correctement.

Questions connexes