2009-03-06 8 views
0

Ich möchte eine Webseite erstellen, in der ich die jQuery-Registerkarten sowohl über eine Seitenleiste als auch über die obere Schaltfläche der jQuery-Registerkarten selbst verwenden kann.Was ist mein Problem mit der Tab-Auswahl in JQuery?

Mein 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> 

Das Problem ist, dass, wenn ich auf die Schaltfläche klicken, werden die Registerkarten nicht zu ändern (das heißt es nicht das Recht, wählen Sie die Registerkarte).

Weiß jemand, was ich falsch gemacht habe?

Antwort

1

Sie haben ein Problem hier:

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

Sie sollten eine # statt $ verwenden:

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

und 1 als zweiter Parameter übergeben werden zweiten Registerkarte, nicht Drittel.

0

Minor Detail aber:

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

konnte in verschmolzen werden:

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