Question

我希望在加载页面时隐藏各种屏幕截图

，然后点击附加了切换功能的按钮后，显示它们。但是，当页面加载时，它们默认显示，如何更改？谢谢。

HTML：

<button>Screenshots</button>
    <p id="hide">Pretent these are some images yo.</p>

JavaScript的：

$(document).ready(function(){
  $("button").click(function(){
    $("#hide").toggle('slow');
  });
});

Answer 1

您可以在CSS中为元素提供display: none声明。在您点击活动时，您可以给它display: block，以展示自己。

CSS：

#hide {
    display: none;
}

JavaScript的：

  $("button").click(function(){
    $("#hide").css('display', 'block');
  });

Working Fiddle

Answer 2

这将解决您的问题。

$(document).ready(function() {
    $('#element-to-hide').hide();
    $('#button-to-show').on('click', function() {
        $('#element-to-hide').toggle();
    });
})

但 当你的网页加载时，'#element-to-hide'会一直显示，直到就绪事件被解雇。

然后你应该使用这样的东西：

<强> CSS：

.hide { display: none }

<强> JS：

$(document).ready(function() { $('#button-to-show').on('click', function() { $('#element-to-hide').toggleClass('hide'); }); })

使用这种方式，您不会在页面加载结束前显示元素问题。

Answer 3

您可以通过多种方式执行此操作。最具成本效益的是使用css隐藏它们：

display: none;

您也可以使用jQuery默认隐藏它们：

$(".hiddenClass").hide();

但是，正如Eevee在他的评论中所说的那样，最好使用jQuery方式来实现，因为有些人可能没有javascript（虽然现在很不可能），如果他们没有它们将无法看到其他截图。

Answer 4

您可以使用

<input type="button" id="show" value="test" style="display: none;">

JavaScript的：

$("#show").click(function(){
    $(this).prop('disabled', true);
});

如何隐藏项目然后用jquery按钮显示？

4 个答案: