View Full Version : How come this doesn't work?

10-07-2011, 08:39 PM
I have a few tabs on my website. They're each set to the corresponding id in the JS file. It's supposed to add #tab-1 to the end of the URL in the users browser when it's clicked. For example, when a user is at mypage.com and they click on the tab, it ads mypage.com/#tab-1 to the end. How come it doesn't do what I want when I click it though?

Here's an example of how it's setup.


<a href="#tab-1" id="tab1">Text</a>


document.getElementById("tab1").onclick = function(){
this.href += "#tab-1";

10-07-2011, 10:15 PM

Do the "tabs" on the page have a style display setting of "none" when the page is first executed?

If yes, you might need to add some more logic to change the selected tab to "block" or 'inline', if needed.

Do you have a link or bit of code to show how the JS and HTML interact for these "tab" settings?

10-07-2011, 10:45 PM
Here's a link to the active tabs: http://www.thatswhyimbroke.com/

The CSS tab reference is .tabset

10-08-2011, 12:19 AM
I you want to do what I think (navigation based on hash values) you're going about it in an awkward way.

I can see that your site is already using jquery.
Please add a plugin for listening to the hash, like this one: http://tkyk.github.com/jquery-history-plugin/

Do this because it's really hard to master how to listen to hash changes cross-browser (in older IE's an empty iframe has to be created etc, to get the history object to behave like it should... an library takes all this pain away).

Then let hash events be the place where changes are born:

if(hash == "") {
// initialize your app
} else {
// hide or show div elements
// and or load new pieces of content through ajax
// depending on the value of hash
{ unescape: ",/" });