Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript - swap navigation

    Hi

    I hope someone can help me.

    I have a drop down navigation bar:

    Tab 1 - Tab 2 - Tab 3.....

    I want Tab 2 to populate (not dynamic content) depending on what is selected in Tab 1.

    Will this be a show/hide thing?

    This is my html code for the drop down navigation bar:

    Code:
    <li><a href="#">Tab 1</a>
      <ul class="tab1">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </li>
    <li><a href="#">Tab 2</a>
      <ul class="tab2">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </li>
    <li><a href="#">Tab 3</a>
      <ul class="tab3">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </li>


    What is the best way to do this?

    Hope someone can help!

    Thanks

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    what do you mean by populating tab 2?

    tabs typically have both a handle (the clickable tab) and a content area.
    if you mean the content, then why would that change according to tab1?

    let's start with the assumption that nothing ever changes and that clicking on a tab (<A>) shows the <UL> underneath.

    what do you want to modify from that most-simple scenario?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi rnd me

    Thanks for replying.

    Heres a brief overview of the brief

    I am creating a t-shirt customiser. In tab 1 you select the style of t-shirt.
    In tab 2 you select the colour.

    I have a script working at the moment, when you click on any of the swatches, the image changes.

    The script grabs the name of the swatch clicked on, and the images updates.

    Hope this makes sense?

    In answer to your question above, I would like to change the <UL> underneath.....
    Do you think this is the best way?

    Many thanks

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    as long as you don't have hundreds of combos, it makes sense to simply included them all in the HTML and use JS to hide/show the ones you need. that's common and easy to do.

    you might want to checkout something like bootstrap or jQuery UI; they have tabs packages available without writing any custom JS, or you can customize the working ones they provide using a little JS instead of using a lot of JS to create it from scratch.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •