CODEWITHSUNDEEP
jqueryhtmltabs
Ricksher
Ricksher

Reputation: 5

Jquery tabs is not working, what am i missing?

I'm trying to use jquery tabs, i got the code from the site: http://docs.jquery.com/UI/Tabs and try it, look:

<html>
<head>
  <script type="text/javascript" src="jquery-1.5.1.js"></script>
  <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#tabs").tabs();
      });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>

Nothing happens. What am i missing?

Upvotes: 0

Views: 889

Answers (2)

Fox32
Fox32

Reputation: 13570

You need to add the css theme of jquery ui. Look here ("Basic overview: using jQuery UI on a web page") for details. Put it in your head tag:

<link type="text/css" href="css/themename/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />

You can choose the default theme or create you own theme via ThemeRoller

Upvotes: 2

DG3
DG3

Reputation: 5296

You are missing stylesheet. Include <link href="http://code.jquery.com/ui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet"> before your javascript files

If you want to override a style, you can do the following. For example, if you want to change the text color of the active tab, I see that the following classes were being used through chrome developer tools. So I can override these classes in my css

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
            color: red !important
}

Upvotes: 2

Related Questions