SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link directly to tab

    Hi,

    I have some jQuery tabs. I wo uld like to be able to link to them directly, but I can't work out how to do this.

    I have the following code:

    PHP Code:
    <ul id="product-tabs">
                    <
    li class="active1"><a href="#tab1">Tab 1</a></li>
                    <
    li><a href="#tab2">Tab 1</a></li>
                    <
    li><a href="#tab3">Tab 3</a></li>
    </
    ul
    then this code:

    PHP Code:
    <div id="tab1" class="product-tab" style="display: block;">
    content here
    </div>

    <
    div id="tab2" class="product-tab" style="display: block;">
    content here
    </div>

    <
    div id="tab3" class="product-tab" style="display: block;">
    content here
    </div
    How could I link directly to each other the tabs?

    Thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    How could I link directly to each other the tabs?
    Are you wanting only one content area to be shown, with tabs selecting which other area you want to show?
    Like in this jQuery-based tabs example?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yes, I only want to show one tab at a time like in the example.

    Thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    Yes, I only want to show one tab at a time like in the example.
    Oh that's good. The linked example is jQuery's tabs, which you can use very easily use.

    You can also do tabs with no JavaScript at all, as can be seen in this article: Create a CSS3-Only Tab Control Using the :target Selector
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can also do tabs with no JavaScript at all, as can be seen in this article: Create a CSS3-Only Tab Control Using the :target Selector
    Or the vanilla JS alternative: http://www.sitepoint.com/forums/show...ript+challenge

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ahh yes! Those were the days - good times
    The different types of solutions that people came up with were quite amazing, all bringing together different types of approaches.

    I'm glad though that people managed to stay away from extremes though, such as with this abuse of design patterns Hello World example.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I'm glad though that people managed to stay away from extremes though, such as with this abuse of design patterns Hello World example.
    That's a bit scary.
    I recently read a great article that approached this from the other angle, namely examining the cost of unnecessary abstraction when anticipating future change in a code base.
    It's well worth a read.

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't get it to work with my code.

    This is what I have:

    PHP Code:
    <div class="container-outer">
      <
    div class="container">
        <
    div id="prod-tabs">
          <
    ul class="tabs">
            <
    li class="first_tab"><a href="#tab1">Tab 1</a></li>
            <
    li><a href="#tab2">Tab 2</a></li>
            <
    li><a href="#tab3">Tab 3</a></li>
          </
    ul>
        </
    div>
        <
    div class="tab_container">
          <
    div id="tab1" class="tab_content"tab 1 </div>
          <
    div id="tab2" class="tab_content"tab 2 </div>
          <
    div id="tab3" class="tab_content"tab 3 </div>
        </
    div>
      </
    div>
    </
    div>
    </
    div
    I would like to be able to link directly to the second tab. Any suggestions?

    Thanks

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Code:
    <a href="http://www.mysite.com/whatever/index.html#tab2>Link to tab 2</a>
    should do it.


Bookmarks

Posting Permissions

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