Question

html structure:

<div id="tabswitch">
    <ul>
        <li class="tab1">Tab 1</li>
        <li class="tab2">Tab 2</li>
        <li class="tab3">Tab 3</li>
    </ul>
    <div class="tab-container tab1">
        <p>venenatis dolor nec feugiat. Nam id tincidunt augue. Nam eleifend scelerisque bibendum. </p>
    </div>
    <div class="tab-container tab2">
        <img src="http://image.shutterstock.com/display_pic_with_logo/51495/51495,1232158237,2/stock-photo-cute-chocolate-lab-puppy-23407567.jpg" alt="" />
    </div>
    <div class="tab-container tab3">
        <iframe src ="http://google.com" width="100%" height="300">
            <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
</div>

jquery code:

    jQuery(document).ready(function() {
        jQuery("#tabswitch ul li:first").addClass("active");
        jQuery("#tabswitch div.tab-container:first").show();

        jQuery("#tabswitch ul li").click(function(){
            jQuery("#tabswitch div.tab-container").hide();
            jQuery("#tabswitch ul li").removeClass("active");

   })
    });

for the default state. the tab1 is show, but why when i click the tab1. it doesn’t hide? namely, why this line doesn’t effect on it? jQuery("#tabswitch div.tab-container").hide();

the tab1 content matches the #tabswitch div.tab-container

Answer 1

Does your CSS specify that .tab1 or .tab-container has a display property other than none?

I think that it may hide the element (using display:none) when the click event is triggered, but it immediately gets a CSS display property of something else (like “block”) when you remove the “active” class. Try putting the removeClass("active") before the hide().

Are you re-inventing the wheel here? Is jQuery-UI’s tabs what you’re trying to create?:

http://jqueryui.com/demos/tabs/