Question

html结构：

<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代码：

    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");

   })
    });

表示默认状态。 tab1显示，但为什么当我点击tab1。它不隐藏？也就是说，为什么这条线不会对它产生影响？ jQuery("#tabswitch div.tab-container").hide();

tab1内容与#tabswitch div.tab-container

匹配

Answer 1

你的CSS是否指定.tab1或.tab-container的显示属性不是none？

我认为当触发click事件时它可能会隐藏元素（使用display：none），但是当你删除“active”类时它会立即获得其他东西的CSS显示属性（比如“block”）。尝试将removeClass("active")放在hide()之前。

你在这里重新发明轮子吗？ jQuery-UI的标签是你要创建的吗？：

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

Answer 2

如果你想隐藏当前标签，你可以使用它......

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

   });

您在点击处理程序的末尾也遗漏了;。

你想要this，我想..

点击本身为什么它不隐藏在jquery？

2 个答案: