469,356 Members | 2,555 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

How to group list into tabbed navigation box

Hi,

The website http://www.komodomedia.com/ has some useful navigation
tabs, just on the right side. I want to creat these kind of box
because I want to group a list into tabs and don't want the page to be
reloaded when user click on tab.

I have no idea how to trace the code because I'm a newbie, it's too
hard for me. The only thing I know is to select all page content, copy
and paste to FrontPage but it not work, only get the pure html
content.

Can anyone help me? Any example or suggestion is welcome. Many thanks!

May 5 '07 #1
1 1212
On May 5, 6:05 am, jza...@gmail.com wrote:
Hi,

The websitehttp://www.komodomedia.com/has some useful navigation
tabs, just on the right side. I want to creat these kind of box
because I want to group a list into tabs and don't want the page to be
reloaded when user click on tab.

I have no idea how to trace the code because I'm a newbie, it's too
hard for me. The only thing I know is to select all page content, copy
and paste to FrontPage but it not work, only get the pure html
content.

Can anyone help me? Any example or suggestion is welcome. Many thanks!
download firebug addon for firefox and experiment with it, to see the
code.
the way that you create the effect you are after is have
<div class="tab_holder_1">
<div class="tab" id="tab1">tab1 html content</div>
<div class="tab closed" id="tab2">tab2 html content</div>
<a class="tab_control selected" href="/page.htm?tab1=open"
onclick="closeAllBut('tab1','tab_holder_1');">tab1 </a>
<a class="tab_control" href="/page.htm?tab2=open"
onclick="closeAllBut('tab2','tab_holder_1');">tab2 </a>
</div>
you then create the style
..closed{display:none;visibility:hidden;}
and a few others to style the divs and their links as required.
(eg. .tab_control, .tab, #tab1,#tab2,#tab_holder_1)

I also would not use onclick (as I have written above) but instead
would attach the onclick event to eac a link with class tab_control
the javascript closeAllBut('tab2','tab_holder_1')
just reads through all the divs of class div inside the div with id
tab_holder_1, setting the classNames of the divs to closed, apart from
one which gets its className set back to just "tab"
I will leave the details for you to find on google, there are many
examples of this kind of thing, but do try and find your way round
firebug.

May 5 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Mark | last post: by
3 posts views Thread by Progalex | last post: by
1 post views Thread by Eric Jones | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.