Question

如何通过以下呼叫隐藏侧边栏div：

<script>
  hideSidebar();
</script>

我的侧边栏HTML：

<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>

Answer 1

只需将所有-*- coding: utf-8 -*-放在结束体标记之前，以确保JS解析器读取您的元素并准备好进行操作：

<script>

或使用DOM ready函数（ jQuery ）：

<div class="sidebar">
<h1>Content</h1>
<p>Content</p>
</div>


<script>
    function hideSidebar(){
         document.querySelector(".sidebar").style.display = "none";
    }
    hideSidebar();
</script>

</body>

Answer 2

使用Jquery的隐藏功能 -

$('.sidebar').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">

<h1>Content</h1>
<p>Content</p>
</div>

Answer 3

如果是{strong>纯JavaScript ：

，则可以使用Element.style.display

＆＃13;

<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>

<script>
  function hideSidebar() {
    document.getElementsByClassName("sidebar")[0].style.display = "none";
  }
  hideSidebar();
</script>

＆＃13;

如果你使用 jQuery ，你可以这样做：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sidebar">
  <h1>Content</h1>
  <p>Content</p>
</div>

<script>
  function hideSidebar() {
    $(".sidebar").hide();
  }
  hideSidebar();
</script>

＆＃13;

Answer 4

最简单的方法是创建一个名为hideSideBar的函数：

<script>
  $(function(){
   hideSidebar();

  function hideSidebar(){
    $('.sidebar').hide();
  }

  })
</script>

Answer 5

<div class="sidebar">
   <h1>Content</h1>
   <p>Content</p>
</div>

添加脚本

<script>
$("document").ready(function(){
 $(".sidebar").css("display","none");
});
</script>

使用jQuery隐藏补充工具栏

5 个答案: