Hey guys

Yahoo has a box with tabs "feature" "sports" "entertainment " ...

I was wondering can i achieve such thing with only CSS and no JS?

I want to make a tab like yahoo which by clicking on the tab , only the new tab contents load, but the whole page stay still.
Seaching for CSS TAB doesn't show something special, any idea ?

Thanks a lot

P.S : If it's not possible only with CSS, any good tutorial for making with JS ?

Clicking to change tabs is what makes it impossible to do with CSS. CSS can change things when the pointer hovers over something, but it can't handle mouse clicks.

For a nice JavaScript example, see ALA's Let Them Eat Cake. Note how all the content remains accessible when JavaScript is disabled/unavailable, but CSS is enabled.

Besides the "Let them eat cake" link, I also would like to add Stu Nicholl's Tabbed pages.

Note that Stu Nicholl's Tabbed pages example blocks access to much of the content when CSS is supported, but JavaScript is disabled/unavailable.

one thing, the Stu Nicholl's tab pages are inside the html file. they are all in one file , and their css display is none. then java turn them on.

does this thing do anything with google search results ?

i mean if i put a lot of information (that effects google search) in these tabs (inside the file, just like Stu Nicholl with display none) , does google still look at them ?

Google doesn't notice the tabs. Iyt doesn't do CSS and JS. As you said yourself, it's all in the same document. Google will read it.

Thanks a lot. Got what i wanted

I've made 2 individual tabs on my page.
i duplicated all the stuff in css and in js file with different names.

the first one is working, but the second is not. i guss it is because onload in th js file. but don't know how can i correct it. ii upload them here :

http://www.7gardoon.com/2/tabbed_pages.html

(FF wants to save the file, dunno , but IE 6 open up the page)

How can i fix it?

Thanks a lot

Your server is responding with

changed it :

http://www.dpxclan.com/2/tabbed_pages.html

There doesn't appear to be any way to access anything but the John Constable tab when CSS is enabled but JavaScript is disabled/unavailable.

in the tab js file, it is written :

onload = function() { ...

what has made me confused is, how can i tell the second tab to run its own function indiviually.

i tried something like :

onload = function2 () { ...

But still no success.
(sorry it is lack of js syntax knowledge)

The script calls onload, which implicitely means window.onload. You can't have this twice in this way. Hence the javascript error you get upon loading of the page, on line 35: can't find variable function2, and the second tabs not working.

You'll need to have a enough knowledge of javascript to make this work. I tried a little bit yesterday, but didn't find anything to make this work either; though surely there is a way, probably through another approach.

Why would you want to use the tabbed pages twice on a page in the first place?

They are 2 different tabs, i just copies the same one to show you in forum.

But the page will have 2 individual tabs. they must work separately.

still no success.