时间戳

首页 > 解决方案 > 如何在点击 html 时更改显示/隐藏或剧透按钮的按钮文本，在以下代码中

html - 如何在点击 html 时更改显示/隐藏或剧透按钮的按钮文本，在以下代码中

问题描述

我想在用户单击时更改显示/隐藏按钮或扰流板按钮的文本。在默认情况下，按钮文本写为显示，当用户单击按钮时，按钮文本应替换为隐藏，如果用户单击隐藏，按钮文本应更改为显示。如何做到这一点，请任何人帮助我，我将非常感激。

<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
  ADD YOUR HIDDEN CONTENT HERE
</div>

标签： html

解决方案

您可以使用 pureJavaScript或Jquery来处理此问题。

在纯 Javascript 中：

您可以定义一个方法并检查元素样式属性。也是style.display您应该检查的属性。

下面的代码解决了你的问题：

<script>
    function toggle(){
        var spolier = document.getElementById('spoiler');

        if(spolier.style.display == "none"){
            spolier.style.display= "block";
        }
        else {
            spolier.style.display = "none";
        }
    }
</script>
<button title="Click to Show"  type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>

在jQuery中：

您应该检查attrjquery 中的属性。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<script>
    function toggle(){
      if ($('#spolier').attr("display") == "none"){
         $('#spolier').attr('display', 'block');
      } else{
         $('#spolier').attr('display', 'none');
      }
    }
</script>


<button title="Click to Show"  type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>

推荐阅读