Question

以下功能在单击相对ID时切换div。设置它的任何方式，以便在页面加载时，切换的div开始关闭？

在点击之前我不希望看到它们。

最佳，

乔伊

<script type="text/javascript">
    $(document).ready(function() {
        $("#architects").click(function() {
             $(".exclusive-architects").toggle();
        });
        $("#international").click(function() {
             $(".exclusive-international").toggle();
        });
        $("#designers").click(function() {
             $(".exclusive-designers").toggle();
        });
        $("#historical").click(function() {
             $(".exclusive-historical").toggle();
        });
    });
    </script>

Answer 1

只需将它们隐藏在dom准备就绪，就像这样：

<script type="text/javascript">
    $(document).ready(function() {
        $(".exclusive-architects, .exclusive-international, 
           .exclusive-designers, .exclusive-historical").hide();

        $("#architects").click(function() {
             $(".exclusive-architects").toggle();
        });
        $("#international").click(function() {
             $(".exclusive-international").toggle();
        });
        $("#designers").click(function() {
             $(".exclusive-designers").toggle();
        });
        $("#historical").click(function() {
             $(".exclusive-historical").toggle();
        });
    });
    </script>

Answer 2

$(function(){ // DOM ready

    $(".exclusive-architects").hide();
    $(".exclusive-international").hide();
    $(".exclusive-designers").hide();
    $(".exclusive-historical").hide();

});

它应该工作：）

Answer 3

您只需要在初始CSS

中添加display:none即可

Answer 4

<强> DEMO

如果您的 HTML 如下所示：

<div id="buttons">

    <div>toggle architects</div>
    <div>toggle international</div>
    <div>toggle designers</div>
    <div>toggle historical</div>

</div>

<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>

比所需要的只是：

$('.cont').hide(); // HIDE ALL INITIALLY

$('#buttons div').click(function(){
  $('.cont').eq(  $(this).index()  ).toggle();
});

切换div以在加载时关闭？

4 个答案: