Question

我正在使用Twitter Bootstrap的按钮组在不同内容之间切换。在http://jsfiddle.net/g8KSf/

可以看到一个例子

基本上，如果点击“游戏”，将显示games_container div，其他div将被隐藏。我的工作正常。

我将帖子类型作为帖子，游戏，视频等存储在数据库中，我希望能够在页面加载时打开相关的div而不是单击。现在，在加载页面时，默认显示post_container。

假设我有一个PHP变量$post_type = 'game';，如何通过点击来切换页面加载时显示game_container？

这是我到目前为止的js：

$('.container').hide();
$('#post_container').show();

$('.post_types button').click(function(){
        var target = "#" + $(this).data("target");
        $(".container").not(target).hide();
        $(target).show();
        $('#post_type').val($(this).text());
});

Answer 1

要在加载时显示游戏容器，您需要替换此行

$('#post_container').show();

到

$('#game_container').show();

参考 LIVE DEMO

目前您正在使用

$('#post_type').val($(this).text());

此处，而不是this用于此行$(this).text()，请使用target变量，如下所示

$('#post_type').val($(target).text());

UPDATE：

要在页面加载时动态显示，

将post_type的值存储在变量
中
var ptype = ...STORE THE POST TYPE VALUE...;
将值传递给此行

$('#'+ptype+'_container').show();
或
$('#'+$post_type+'_container').show();

参考 LIVE DEMO 2

Answer 2

将$('#post_container').show();更改为$('#game_container').show();

这里你去http://jsfiddle.net/g8KSf/5/

我对php并不熟悉，因为这里有动态：

function(){ $.ajax({ 
       type:"GET", 
       url:"file.php", 
       data:id, 
       success:function(container){ 
           $('#'+container).show();
       }, 
       // ... more ...
    }

Answer 3

使用您喜欢的选择器在页面加载时运行show()。

$(function() {
    $('#<?=$post_type?>_container').show();
});

<?=?>简短的PHP for echo，你不能在你的.js文件中使用它。如果我指出的方式对你不好，你应该为你喜欢的选择器设置一个全局变量，并使用它而不是内联PHP。

Answer 4

你可以：

直接在JavaScript代码中将第二行的#post_container更改为#game_container
或之后致电$('#btn-game').click();，例如在onload的{{1}}属性中或在单独的body代码中。

在页面加载时显示/隐藏div并单击

4 个答案:

UPDATE：