Some web pages have tabs at the top, where you click on the tab and a different piece of information appears within the same web page beneath the tab. It's not loading a new page, the information under the new tab appears instantly when you click on it.

I'm pretty sure it's done by having the data for all of the tabs pre-loaded into DIV sections, and then when you click on the link of the desired tab, it just unhides one DIV while hiding all the others. Or some kind of trick like that.

It's easy enough to split up a web page into named DIV sections, but what I don't know how to do is to make them appear and disappear when I click on an A HREF.

Can anyone give me a simple example of how to do that?

Every time I google search for how to do tabs, what I get is a thousand web pages with CSS examples of the graphic and mouseover tricks to make the tabs *look* cool. That's great and all, and I used one of those examples to do tabs with the fancy mouseovers, but the tutorial only showed how to make the tabs look pretty rather than how to make them actually *DO* anything when you clicked on them.

<A HREF="#" onclick="switchTab('tab_name_goes_here')">Click me</a>

Then write some JavaScript that hides all of the divs except for the one named.

Alternatively, you could try not designing your site like that in the first place, whereupon your users' back buttons and browsing history would still work, and each page of information would have its own URL that you could give to people.

Peter

I am with Peter on this one. You'd break back buttons, search engines and make the page load slower with the div trick.

Tabs are nice though, I'd just make them simple links to separate pages for better functionality.

Actually, I agree with Peter as well. Each tab should link to a different page, and you can use the same template or "master page" (to use ASP.NET parlance) for them.

However, for small regions of text, where you wouldn't want to provide a URL to that "page", then they're fine.

Yeah, but I *know* how to do that. Where's the educational part if I do that? :-)

On the other hand, you guys make some pretty good arguments for reasons to do them as separate pages. I hadn't thought about the backbutton incompatibility until you brought it up. I might rethink everything now.

I still wanna know how to do it...

Ah, the devil's own language. What would said Javascript code look like?

Google for "DOM toggle". The third link (http://www.tjkdesign.com/articles/toggle_elements.asp) has an example to show/hide elements. It's not tabs, but it should get you started.

Are you sure you got those sentences in the right order?

Peter

That one stopped me as soon as I noticed that it needed a 3KB script to be downloaded and unzipped before it would work. Yikes.

I'll google for DOM Toggle and try to find something lighter weight. Surely this is only a few lines of javascript?

IANAWD, but couldn't you have several opaque layers and modify their z-indices?

I actually did some messing with the z-index property a bunch yesterday, for a completely different reason, and it was a big pain in the ass. The objects in question, for my particular layout design, got rather messed up and didn't play and wrap right when I started using the z-index property.

I agree that the approach would work, but what I'm saying is that in my particular case, this probably isn't a workable solution.

To hide one div and show another do:

document.getElementById("idOfDivToHide").style.display = "none";
document.getElementById("idOfDivToShow").style.display = "inline";

Ah, excellent, that worked perfectly. Thanks, Roger and Andy!

a neat trick I learned while doing some ajax stuff. set the location.hash property when you want to restore the back buttons.

On my page, before the user leaves the search results to view a detailed page, I set the location.hash to p=## (##= the page number from the search results).

Then when the user clicks the back button, the page they goto is searchresults?id=something#p=9

then on page load in javascript, look for the bookmark, parse it for the p= value, and load up that page of data into the search results.

it's kind of a ugly hack, but it works.

Check out the Ext javascript library.

Tab demo is here.

It can take your existing divs and render them into a tab panel with just a few linkes of javascript. Example:

Roger, I've done this, and it works. Thanks for this tip.

I like the implementation, and I think it does the right thing for the pages I'm using it for. Yes, as was discussed elsewhere in the thread it breaks the "Back" button functionality, but for the places I'm using it, that's fine.

It has one drawback I'd like to work around, though, and I'm wondering if anyone here knows how to work around it.

The A HREF points to "#" meaning "an anchor with no label" which essentially defaults to the top of the page. Meaning that, in this case, each time someone clicks on a tab, they get scrolled back up to the top of the page at the moment they click. Some browsers don't do the scroll, which is nice, but I'd really like it to not do the scrolling on *every* browser. My tabs are always near the top of the page, but not exactly at the top of the page, so sometimes you've scrolled down the page slightly when you hit the tab. So scrolling back up to the top of the page doesn't feel right.

I seem to recall I tried doing A HREF="", and that works on some browsers and not on others.

What I really need is a way for them to click on the tab and have it result in the ONCLICK event, but not have it behave in the way HREFs do. I think I can do an ONCLICK for an IMG, but I don't want to have to make GIF files for every tab name, I want them to be text.

Anyone know of a solution in this case?

You can use a span or a div (and use their onclick events) in the tab and use css to make it behave like an anchor. In fact many other dhtml elements could be used the same way (lots of them have onclick events).

I've just remembered the other way

Stick with your anchors, but at the end of the onclick do a "return false;". I don't know whether that works in all browsers though.

So:

<a href="#" onclick="doBlah(); return false;">click</a>

How about:

<a href="javascript:void(0)" ...>

?

Yeah, you can attach onclick to a <span>. See the attached.

While void(0) is almost certainly the "proper" answer, I'm afraid that IE has had some issues with void(0) in some situations in the past

The other nice thing about that, is that if you use "myothertab.html" instead of "#", the whole thing works for people who have Javascript switched off (while still getting the slicker, no-reload behaviour if JS is switched on).

Peter

Works perfectly on most of the browsers I care about, testing the other browsers now. Thank you!

The other suggestions in this thread were all fantastic, and I'm sure they all would have worked, too. I chose that one for a few reasons not worth detailing here. Thanks everyone!

I'm a little late to the game, but yes, return false(); is the proper way to do this as far as I know.

What you're telling it to do is run the code you've given it and then cancel the event. Returning true runs the code and then allows the event to proceed as normal.

Yep, I completely understand why it works, now that I see it in action. I just didn't know I could do that, let alone do it right there within the onclick statement in the HTML like that.

Maybe Javascript isn't so bad after all. :-)