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:


<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:


<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!

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?

Hi,

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

Thanks

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

Or the vanilla JS alternative: http://www.sitepoint.com/forums/showthread.php?1069204-JavaScript-Challenge-Convert-JQuery-to-Plain-JavaScript&highlight=javascript+challenge

Ahh yes! Those were the days - good times :slight_smile:
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.

:lol: 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.

I still can’t get it to work with my code.

This is what I have:


<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

Hi,

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

should do it.