How to group list into tabbed navigation box

[jzaiq1]

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!

 

[shimmyshack]

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.