Question

我有4种不同的DIV，里面有桌子和其他东西。

如何在页面加载时默认显示id =“t04” 并隐藏所有其他，但当我点击它的名称能展示和隐藏其他人吗？

默认情况下，我希望它是id = t04。

<div id="t01" class="targetDiv">
...code...

</div>
<div id="t02" class="targetDiv">
...code...

</div>
<div id="t03" class="targetDiv">
...code...

</div>
<div id="t04" class="targetDiv">
...code...

</div>
<a id="all"  onclick="changeClass('all')">All</a><br>
<a id="corporate"  onclick="changeClass('corporate')" >Corporate</a><br>
<a id="branch"  onclick="changeClass('branch')" >Branch</a><br>
<a id="Misc"  onclick="changeClass('Misc')" >Miscellaneous</a><br>


<script type="text/javascript">
    function changeClass(x){
        if(x=="all"){           
            $("#t01").hide();
            $("#t02").hide();
            $("#t03").hide();   
       $("#t04").show();            
        }
        else if(x == "corporate"){          
            $("#t01").show();
                        $("#t02").hide();
                        $("#t03").hide();
            $("#t04").hide();
        }
        else if(x == "branch"){         
            $("#t01").hide();
                        $("#t02").show();
                        $("#t03").hide();
            $("#t04").hide();
        }
        else if(x == "Misc"){           
            $("#t01").hide();
                        $("#t02").hide();
                        $("#t03").show();
            $("#t04").hide();
        }
    }
</script>

Answer 1

一种方法是使用类名：

<div id="t01" class="targetDiv hidden">

的CSS：

.hidden {
    display:none;
}

然后你可以使用：

$("#t01").removeClass('hidden');

此外，如果您想取消隐藏所有这些内容，可以使用：

$('.hidden').removeClass('hidden') ...而不是单独指定每个。

Answer 2

我使用带有display：none的'hidden'类运气得多。而不是在jquery中使用show / hide，添加/删除这个隐藏的类。这样你就可以预先设置你的div了：

<div id="t01" class="targetDiv">
...code...

</div>
<div id="t02" class="targetDiv hidden">
...code...

</div>

如何隐藏div默认但能够在以后显示它们？

2 个答案: