How to make custom tab using jquery?
<p>i have following html, i want to make simple tab using jquery</p>

<pre><code>&lt;td style="border-color: black; border-style: solid; border-width: 1px 0 1px 1px;"&gt;
    &lt;div id="cont-1-1"&gt;
        My first tab content
    &lt;/div&gt;
    &lt;div id="cont-2-1"&gt;
        My second tab content
    &lt;/div&gt;
&lt;/td&gt;
&lt;td style="width: 30px"&gt;
    &lt;div id="tab-box"&gt;
    &lt;div style="height: 121px;"&gt;&lt;img class="cont-1-1" src="/Images/Tab1.png" /&gt;&lt;/div&gt;
    &lt;div style="border-left: 1px solid Black;"&gt;&lt;img class="cont-2-1" src="/Images/Tab2.png" /&gt;&lt;/div&gt;
    &lt;div style="border-left: 1px solid Black; height: 40px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/td&gt;
&lt;/td&gt;
</code></pre>

<p>Where <code>Tab1.Png</code> and <code>Tab2.Png</code> are my tab headers and <code>div id :cont-1-1 and 2-1</code> are tab content,
i don't want to use any jquery plug-in for this, just need something simple when i click on tab,,hide and show contents</p>

<p>This is what i am trying :</p>

<pre><code>$(document).ready(function () {
                $('#tab-box').each(function () {
                    // For each set of tabs, we want to keep track of
                    // which tab is active and it's associated content
                    var $active, $content, $links = $(this).find('img');

                    // If the location.hash matches one of the links, use that as the active tab.
                    // If no match is found, use the first link as the initial active tab.
                    $active = $(Find First Tab from div);
                    $active.addClass('active');
                    $content = $($active.attr('class'));

                    // Hide the remaining content
                    $links.not($active).each(function () {
                        $($(this).attr('href')).hide();
                    });
</code></pre>

<p>thanks</p>
