2013-10-04, 04:21 PM
I've got the Jquery ui tabs going on my site. When I first install it (the last couple of times, literally straight from this page: http://api.jqueryui.com/tabs/) it works perfectly, but as soon as I refresh the page for any reason, it breaks.
It will start displaying ALL content tabs, instead of just the active one. The only mention of this I can find is here:
http://stackoverflow.com/questions/14361...bs-on-load
I've tried the fixes listed in this thread, and they didn't help. Just like the last bloke that posted there, all of my tab contents are display display:block, overriding anything else I have set previously. Putting style="display:none;" in the items themselves make them simply disappear, and not reappear when I active their tab. Placing the same thing in a <style> tag will simply not work, and they will go back to display:block;
JAVASCRIPT
HTML
Does anyone know what the heck is going on!? Like I said, when I first install it, it works wonderfully. But even if I go edit something else entirely and refresh, it stops working again. I just don't even know what to do with it, or why it's doing this.
I'd also like to mention I have no "div" specific css styling.
It will start displaying ALL content tabs, instead of just the active one. The only mention of this I can find is here:
http://stackoverflow.com/questions/14361...bs-on-load
I've tried the fixes listed in this thread, and they didn't help. Just like the last bloke that posted there, all of my tab contents are display display:block, overriding anything else I have set previously. Putting style="display:none;" in the items themselves make them simply disappear, and not reappear when I active their tab. Placing the same thing in a <style> tag will simply not work, and they will go back to display:block;
JAVASCRIPT
<script>
(function($) {
var tabOpts = {
hide: {
effect: "blind",
duration: 800
},
show: {
effect: "blind",
duration: 800
}
};
$("#tabs").tabs(tabOpts);
})(jQuery);
</script>
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
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-2" style="display:none;">
2222 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" style="display:none;">
444444 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
Does anyone know what the heck is going on!? Like I said, when I first install it, it works wonderfully. But even if I go edit something else entirely and refresh, it stops working again. I just don't even know what to do with it, or why it's doing this.
I'd also like to mention I have no "div" specific css styling.