Tabbed navigation within 1 page

[cph]

Hey everyone,

I’m designing a site where on the home page I would like to have tabs that display some info on the clients three main product categories (and with links to the actual category pages and featured products), such that the first is displayed when the page is first reached and they can then view the info on the other products by clicking on the tabs for those.

Hope that’s clear!

Ok, so one way of doing this would be to have three diferent versions of the home page - but that’s no good because there is other content on the home page and we would run into issues with duplicate content.

The obvious way is with javascript displaying / hiding the right content onclick. Problem then is accessibility with javascript disabled users unable to get to the other content.

I guess the answer is writing the code in such a way that the barebones HTML is all there for those without javascript and then the javascript does its work reformatting the sections into the tabbed nav…but that seems like a complicated bit of programming for me.

Another solution is to simply display an error message “it appears javascript is disabled, please enable if you want this site to function fully” and then hide the message with javascript of course.

Anyway I was wondering if:

1. anyone had any thoughts on all of this
2. anyone can think of a better solution
3. anyone knows any scripts out there that do this sort of thing that I could use

Many thanks,

cph

[rpkamp]

@cph

Ok, so one way of doing this would be to have three diferent versions of the home page - but that’s no good because there is other content on the home page and we would run into issues with duplicate content.

If something is supplied in the URL that indicates another tab should be open, set <meta name=“robots” content=“noindex,follow” /> in the head of the HTML, that way you don’t get a penalty for duplicate content.

@cph

I guess the answer is writing the code in such a way that the barebones HTML is all there for those without javascript and then the javascript does its work reformatting the sections into the tabbed nav…but that seems like a complicated bit of programming for me.

That’s what I do in cases like this. You just put everything in the HTML and then using javascript say: hide this, hide that, show that, apply this style to that element there. If you think about it carefully it’s really not that hard. Created something similar just last week in about 30 minutes.

@cph

Another solution is to simply display an error message “it appears javascript is disabled, please enable if you want this site to function fully” and then hide the message with javascript of course.

No offence, but those messages are lame, and they don’t help you (probably only makes non-js users angry). Then you’d better hide the alternative tabs and show them using javascript and accept that non-js users can’t see them at all.

@cph

anyone knows any scripts out there that do this sort of thing that I could use

No, I always write this kind of thing myself (using jQuery).

[rpkamp]

@cph

have the links on the other tabs go through to the category pages put have the javascript change the link to show the content on the home page.

That sounds good :tup:

[cph]

Thanks ScallioXTX,

That’s got me thinking! I recon I’ve come up with an ideal solution:

have the links on the other tabs go through to the category pages put have the javascript change the link to show the content on the home page.