单击按钮后如何隐藏div？答案

【问题标题】：How to hide div after clicking on button?单击按钮后如何隐藏div？
【发布时间】：2015-09-10 12:18:51
【问题描述】：

当导航到同一页面时，一旦用户单击按钮，我想隐藏 div（即“hide-div”）。请帮我解决这个问题。谢谢

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>

【问题讨论】：

请点击以下链接stackoverflow.com/questions/14648439/…
在setLocation 添加getElementById('dide-div').setAttribute('style','display:none;');
使用 localStorage 保存值并根据值显示/隐藏 div ..
你能在上面编辑吗？我不明白。对不起

标签： javascript

【解决方案1】：

你可以通过简单的 jquery 来做到这一点

 <script>
jQuery(document).ready(function($) {
 $(".button").click(function(){
  $("div").fadeOut();
   });
});
</script>

【讨论】：

【解决方案2】：

使用 原版 JavaScript。虽然我建议使用事件处理程序而不是内联 JS，但这是针对您的代码而言的。

使用style.display隐藏元素
您可以使用window.location 隐藏按钮后重定向页面

function setLocation(loc) {
  document.getElementById('hide-div').style.display = 'none';
  window.location = loc;
}

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>

【讨论】：

【解决方案3】：

使用 jQuery，您可以在 onclick 中执行此操作：

$('#hide-div').hide()

http://api.jquery.com/hide/

【讨论】：

【解决方案4】：

使用jQuery隐藏它：

$('#hide-div button').click(function(){
    $(this).parent().hide();
});

【讨论】：

【解决方案5】：

我假设您已经将 jQuery 添加到您的页面中。所以，可能是这样的：

 $('#hide-div .button').on('click', function() {
      $('#hide-div').hide();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>

【讨论】：