Geek Answers Handbook

Inactive jQuery-UI Tabs

So, I'm trying to make tabs with a jQuery UI, but I can't get them to work. It just displays as a bulleted list, and then with divs everything is under each other. I read on another post that you need some kind of css / theming that I did not have before, so I downloaded it using a special theme. I unpacked it into a folder with my media and created a js, css and development-bundle folder.

I have two js scripts included in the page, and I checked in the Chrome developer tool to make sure they load, and they are. My file also has the following code:

<head> <script type='text/javascript'> $(document).ready(function(){ $("#tabs").tabs(); }); </script> </head> <div id='tabs'> <ul> <li><a href='#tabs-1'>Manage Categories</a></li> <li><a href='#tabs-2'>Add Forms</a></li> <li><a href='#tabs-3'>Change Forms</a></li> </ul> <div id='tabs-1'> <h4>Current Categories</h4> {% for category in categories %} <a href='/admin/fm/delcat/{{ category }}/'>Delete</a> &nbsp;&nbsp;&nbsp; {{ category }}<br /> {% endfor %} </div> <div id='tabs-2'> <p> stuff</p> </div> <div id='tabs-3'> <p>stuff</p> </div> </div>

Not sure why it is not working.

+4
source share
2 answers

You need to add the jQuery UI CSS file.

 <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

That should do it.

+8
source

To reproduce what you described, I had to omit the stylesheet. This suggests that you didn’t quite have a piece of CSS.

The code for the example tabs on the jquery site is a good start, in which I copied the following from and then pasted it on top of your code

  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
0
source

More articles:


All Articles