4

以下函数在单击相对 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>
4

4 回答 4

4

只需将它们隐藏在 dom ready 上，如下所示：

<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>
于 2012-11-07T23:22:45.963 回答
1

演示

如果您的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();
});
于 2012-11-07T23:31:06.600 回答
1

你应该只需要在display:none你的起始 CSS中添加一个

于 2012-11-07T23:26:35.753 回答
0 
$(function(){ // DOM ready

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

});

它应该工作:)

于 2012-11-07T23:22:27.357 回答