Tabbed Panes show just hyperlinks, no interface

Tabbed Panes show just hyperlinks, no interface

Hello,

I want to use jQuery for Tabbed Panels. I do the following. It does not work. I just get the links and and text text below it. I am new to using this.

  1. <link type="text/css" href="template.css" rel="stylesheet" />
  2. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  3. <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>

  4. <script type="text/javascript">
  5.        $(function() {
  6.            $( "#tabs" ).tabs();
  7.  });
  8. </script>

  9.                         <div class="demo">
  10.                             <div id="tabs">
  11.                                 <ul>
  12.                                     <li><a href="#tabs-1">Tab-3</a></li>
  13.                                     <li><a href="#tabs-2">Tab-5</a></li>
  14.                                     <li><a href="#tabs-3">Tab-7</a></li>
  15.                                 </ul>
  16.                                 <div id="tabs-1">
  17.                                     <p>Data1</p>
  18.                                 </div>
  19.                                 <div id="tabs-2">
  20.                                     <p>Data2</p>
  21.                                 </div>
  22.                                 <div id="tabs-3">
  23.                                     <p>Data3</p>
  24.                                 </div>
  25.                             </div>

  26.                         </div>
Also, instead of the Data1, Data2, Data3 I want to put tables and populate it from SQL query. How can I go about it?

Thanks a lot !!