title: jquery ui tabs aren't working as intended
body: <p>ive created the following code. it shows the tabs i want but the content on the page doesnt change when i click a tab. the content for all the tabs is shown on the same page. when i click a tab the link goes in the address bar in the browser. 
  any ideas how to stop this link happening and to get the content separated into tabs?
      
      
      
          
          Sonachan - Bar</p>
  
  <pre><code>    &lt;link href="/scripts/jui/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="/styles/layout.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="/scripts/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/jui/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="admin-tabs" class="col"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#admin-tabs-1"&gt;&lt;span&gt;Add an Item&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#admin-tabs-2"&gt;&lt;span&gt;Change an Item&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#admin-tabs-3"&gt;&lt;span&gt;Add a Category&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#admin-tabs-4"&gt;&lt;span&gt;Change a Category&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="admin-page"&gt;
              &lt;?php //add an item ?&gt;
              &lt;div id="admin-tabs-1"&gt;
  
                  &lt;div class="admin-heading"&gt;Add an item&lt;/div&gt;
                  &lt;form id="additemform"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Select a category:
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;select&gt;
                                      &lt;?php foreach (Category::model()-&gt;findAll() as $category): ?&gt;
                                          &lt;option id="cat-&lt;?php echo $category-&gt;id; ?&gt;"&gt;&lt;?php echo $category-&gt;name; ?&gt;&lt;/option&gt;
                                      &lt;?php endforeach; ?&gt;
                                  &lt;/select&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Product name:
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input&gt;&lt;/input&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Product price:
                              &lt;/td&gt;
                              &lt;td id="poundsign"&gt;£&lt;/td&gt;
                              &lt;td colspan="2"&gt;
                                  &lt;input id="price-pounds"&gt;&lt;/input&gt;
                                  .
                                  &lt;input id="price-pence" maxlength="2"&gt;&lt;/input&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="submit" value="Create!"&gt;&lt;/input&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div id="admin-tabs-2"&gt;
                  content of tab 2
              &lt;/div&gt;
              &lt;div id="admin-tabs-3"&gt;
                  content of tab 3
              &lt;/div&gt;
              &lt;div id="admin-tabs-4"&gt;
                  content of tab 4
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and this is my jquery :</p>
  
  <pre><code>$(function() {
  $("#admin-tabs" ).tabs();
  });
  </code></pre>