How to group list into tabbed navigation box

Discussion in 'Javascript' started by jzaiq1@gmail.com, May 5, 2007.

  1. Guest

    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, 2007
    #1
    1. Advertising

  2. shimmyshack Guest

    On May 5, 6:05 am, 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.
    shimmyshack, May 5, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RCS
    Replies:
    1
    Views:
    427
    =?Utf-8?B?Q2hyaXMgTG92ZQ==?=
    Dec 21, 2005
  2. kaibo

    Tabbed navigation and CSS

    kaibo, Dec 28, 2005, in forum: HTML
    Replies:
    3
    Views:
    564
    kaibo
    Dec 29, 2005
  3. Justin
    Replies:
    5
    Views:
    4,779
    Michael Rauscher
    Sep 26, 2006
  4. mcnewsxp

    tabbed navigation

    mcnewsxp, Nov 3, 2010, in forum: HTML
    Replies:
    2
    Views:
    458
    mcnewsxp
    Nov 3, 2010
  5. Replies:
    1
    Views:
    108
    Bart Van der Donck
    Jun 12, 2007
Loading...

Share This Page