在頁面加載時顯示/隱藏div並單擊

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();

參考現場演示

而且目前你正在使用

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

在這里，而不是使用this此行$(this).text()使用target變量如下

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

更新：

要在頁面加載時動態顯示，

1. 將post_type的值存儲在變量中

   var ptype = ...STORE THE POST TYPE VALUE...;

2. 將值傳遞給此行

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

參考現場演示2

Answer 2

更改$('#post_container').show(); to $('#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(); 之后，例如在body的onload屬性中或在單獨的script標記中。