Question

你好朋友我在小提琴上找到了一个show hide div脚本，我需要在我的项目中使用这个脚本，但我的问题是我想默认显示第一个容器文本，默认情况下它只显示按钮点击时显示的内容。任何人都可以帮助我，我会非常感谢你。

<div class="btn-group" data-toggle="buttons-radio"> 
    <button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button">Game</button>
    <button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button">Video</button>
    <button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button">Giveaway</button>
</div>
<div class="see se" id="game_container">
    game stuff
</div>

<div class="see" id="video_container">
    video stuff
</div>

<div class="see" id="giveaway_container">
    giveaway stuff
</div>

$(document).ready(function() {
    $('.see').hide();
    $('.btn-group button').click(function(){
        var target = "#" + $(this).data("target");
        $(".see").not(target).hide();
        $(target).show();
    });
});

FIDDLE DEMO

Answer 1

您可以隐藏所有容器，不包括第一个容器，如下所示。希望它有所帮助。

$('.see').not(':first').hide();

Answer 2

使用css进行隐藏会更有效率....这样的元素不会等到javascript启动并给你一个不隐藏的闪存

CSS

.see{display:none}
#game_container{display:block}

取代：

$(".see").hide()

Answer 3

将您的JS代码替换为：

$(document).ready(function() {

    $('.container').not('#game_container').hide();
    $('.btn-group button').click(function(){
        var target = "#" + $(this).data("target");
        $(".container").not(target).hide();
        $(target).show();
    });

});

小提琴：http://jsfiddle.net/VYSXn/274/

默认显示第一个容器

3 个答案: