Question

我有以下HTML代码：

<div id="Activity" class="rep_tb0" style="width: 100%">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

我希望它在网页打开时不可见，然后在我运行一些javascript时显示它是可见的。使用jQuery有一个简单的方法吗？如何让它隐藏起来并使其在网页启动时没有为它保留空间？

Answer 1

使用display:none;样式隐藏它：

<div id="Activity" class="rep_tb0" style="width: 100%; display:none;">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

用jquery显示：

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

代码：http://jsfiddle.net/s2bBw/1/

Answer 2

要使其不可见，请将display: none;添加到style属性 - 或者更好地将其添加到类中。您想在什么条件下显示鼠标悬停，点击等？

这适用于点击事件：

HTML

<div id="Activity" class="rep_tb0" style="width: 100%; display: none;">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

<a href="#" id="show">Show div</a>

JS

$("#show").click(function() {
    $("#Activity").show();
});

Answer 3

隐藏加载，执行此操作

$(function(){
    $("#Activity").hide();
});

使其可见

$("#Activity").show();

Answer 4

你可以像这样隐藏页面加载div：

$(document).ready(
  function{
    $("#Activity").hide();
  }
);

然后当你需要展示它时取消隐藏。

$("#Activity").show();

Answer 5

HTML

<div id="Activity" class="rep_tb0" style="width: 100%: display:none;">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

CSS

#Activity{
    display:none;
}

脚本

function showThat(){
    $("#Activity").show()
}

如果您想使用showThat()函数或$("#Activity").show()

使其可见

Answer 6

如果你想在运行一些javascript时显示它，你可以把：

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

在那个javascript中：

function run(){
  some code;
  $('#Activity').show();
}

或将其放在一个函数中，并从任何你喜欢的地方调用该函数：

function showActivity(){
    $('#Activity').show();
}
$().ready(function() {
    showActivity();
});

Answer 7

您可以将其包含在jquery脚本中并使用append将其放在您想要的位置，在此处搜索：enter link description here

有些事情：

    var code = "<div id="Activity" class="rep_tb0" style="width: 100%">
                 <div class="rep_tr0" style="width: 100%">
                 <div class="rep_td0" style="width: 100%" 
                 id="ActivityLog">Activity Log<br /><br />
                </div>
                 </div>
                  </div>"

$("element_you_want_to_append_to").append(code);

如何使用jQuery显示此代码

7 个答案:

HTML

CSS

脚本