JQuery Tabs not working when there's a url-friendly query string

JavaScript
1

Hey guys,

I’ve added the most basic implementation of JQuery tabs. It’s working fine so long as there’s not a url-friendly query string.

In other words, if I load index.php, it will work fine. Even index.php/anystring doesn’t have any problems. However, if I try to load something such index.php/anystring1/anystring2, none of the CSS styles for the tabs appear to be applied to the tabs list making all the tabs’ contents appear on the same page.

Any idea how I can work around this to ensure I can preserve the current format of query string without breaking the tabs? Using the old fashioned way doesn’t appear to result in any problems, but I’m trying to avoid having to revert to that format.

Much thanks,

Bardi

2

It’s because your path to the CSS or JavaScript files is not an absolute URL or relative to the root of the site.

When you say src=“example.css”, the browser will try to load http://www.example.com/index.php/anystring1/example.css, as that’s the current directory, according to the URL.

So write src=“/example.css” or src=“http://www.example.com/example.css”

3

That was it! I had used absolute URL to link to the stylesheet, but not to the JS.

Thanks for the reply, Dan. As always, your eyes/ears/wisdom have come to my rescue :slight_smile: