Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to group list into tabbed navigation box

Reply
Thread Tools

How to group list into tabbed navigation box

 
 
jzaiq1@gmail.com
Guest
Posts: n/a
 
      05-05-2007
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!

 
Reply With Quote
 
 
 
 
shimmyshack
Guest
Posts: n/a
 
      05-05-2007
On May 5, 6:05 am, (E-Mail Removed) 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
tabbed navigation mcnewsxp HTML 2 11-03-2010 04:19 PM
help with inserting an internal frame into a tabbed pane Justin Java 5 09-26-2006 11:08 AM
Tabbed navigation and CSS kaibo HTML 3 12-29-2005 04:32 PM
A tabbed navigation web control that supports SiteMapProvider? RCS ASP .Net 1 12-21-2005 01:20 PM



Advertisments