How do they build these middle of page tabs?

[wd2b]

Hello Folks,

I was on newegg.com and saw their middle of the page tabs, like “Overview”, “Details”, and “Reviews” as shown in the page at this link: http://www.newegg.com/Product/Product.aspx?Item=N82E16819115067&nm_mc=EMC-IGNEFL010711&cm_mmc=EMC-IGNEFL010711-_-EMC-010711-Index-_-ProcessorsDesktops-_-19115067-L01A

Can CSS alone create such tabs? Or do such task require other softwares?

If once can use CSS alone to create such tabs, would someone here be so kind to help me with some information.

If other softwares are required, what might most likely be the software required?

I have some basic CSS knowledge, but not enough to fully understand whether such task can be done with some images and CSS. Any and all thoughts are much appreciated.

Thank you in advance.
wd2b

[wd2b]

Hi Chris,

Thanks. Would like to be able not only create the tabs, but make them functional just as they are in that page from the link. So, yes, like you said, make the tabs clickable without actually changing links, just as on that very page.

How much of jQuery would that involve? Another word, would it take an extensive jQuery script? Would you mind to write some sample jQuery to show me how?

[Historical Forums User]

yumm, delicious AJAX goodness. I simply googled, “AJAX tab switch” and found a bunch of options. Here is one of those rotten “10 ways to…” pages with a bunch of AJAX tab switch methods linked.

http://tutorialblog.org/10-javascript-ajax-tabs/

[jamygolden]

Chris Coyier did an example of this with CSS3. It would probably be a better idea to make use of javascript though.

[wd2b]

Chris, Aaron, and Jamy, thank you very much for your help and links. Very rich info. I am going over some jQuery and Ajax info now, hopefully, will get some report back soon. Thanks.

[Author]

Posts