Quel est mon problème avec la sélection d'onglets dans JQuery?

Je souhaite créer une page Web dans laquelle je peux utiliser les onglets jQuery à la fois par une barre latérale et par la barre de boutons supérieure des onglets jQuery.Quel est mon problème avec la sélection d'onglets dans JQuery?

Mon code:

<!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 sait ce que j'ai fait de mal?

Source

2009-03-06 Anonymous

Vous avez un problème ici:

$("$tabs").tabs("select", 1);

Vous devez utiliser un # au lieu de $:

$("#tabs").tabs("select", 1);

Et en passant 1 en tant que deuxième paramètre sélectionneront deuxième onglet, et non la troisième.

Source

2009-03-06 12:13:40 ybo

détail mineur mais:

$(document).ready(function(){ 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
        $("#tabs").tabs(); 
      });

pourrait être fusionné dans:

$(document).ready(function(){ 
        $("#datepicker").datepicker(); 
        $("#tabs").tabs(); 
      });

Source

2009-03-06 12:26:44

Quel est mon problème avec la sélection d'onglets dans JQuery?

Répondre

Questions connexes