2009-03-06 12 views
0

Ich habe folgendes Problem:Ausgabe mit Tab-Auswahl in JQuery

Ich möchte eine Webseite erstellen, in dem ich die jQuery Tabs sowohl von einer Seitenleiste und der oberen Buttonleiste des jQuery verwenden können Tabs selbst. Ich verwende den folgenden Code ein:

<!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 von euch, was ich falsch gemacht habe?

Hoffnung, von Ihnen zu hören alle,

freundlichen Grüßen Jeroen

Antwort

1

Sie haben ein paar Fehler und Probleme mit der Selektoren, die im Weg ist. Repalce Ihren JavaScript-Code mit dem folgenden

$(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; 
    }); 
}); 

Das gut funktionieren sollte.