Question

我的HTML页面上有一个按钮，两个段落说id =＆＃39; para_1＆＃39;和id =＆＃39; para_2＆＃39;。我希望在加载页面时显示para_1中的内容，并在每次第一次点击按钮时在第二次点击按钮和内容中显示内容。

到目前为止，我有以下代码：

<html>
    <head>
    </head>
    <body>
        <script language="JavaScript">
         function setVisibility(id) {
             if(document.getElementById('bt1').value=='Hide Layer'){
                 document.getElementById('bt1').value = 'Show Layer';
                 document.getElementById(id).style.display = 'none';
              }else{
                 document.getElementById('bt1').value = 'Hide Layer';
                 document.getElementById(id).style.display = 'inline';
              }
         }

        </script>
        <input type=button name=type id='bt1' value='Show Layer'    onclick="setVisibility('para_2');";> 

        <p id ="para_1"> display this is on load and second click</p>
        <p id ="para_2"> display this on first click </p>
        <br><br>
  </body>

</html>

它目前正在做的是加载加载时和第二次点击隐藏段的id =＆＃39; para_2＆＃39;。

我是HTML的新手，我真的被困在这一部分。任何帮助将不胜感激。谢谢。

Answer 1

您可以将第二段的可见性设置为内嵌display:none，以便段落在页面加载时隐藏，并使用ternary运算符切换两段的可见性，从而无需{ {1}}参数：

id

＆＃13;

<p id="para_2" style="display:none">display this on first click</p>

＆＃13;

window.setVisibility = function() {
  var para1 = document.getElementById("para_1");
  var para2 = document.getElementById("para_2");

  para1.style.display = para1.style.display === 'none' ? '' : 'none';
  para2.style.display = para1.style.display === 'none' ? '' : 'none';
}

＆＃13;

如果您使用了jQuery，则可以通过在单击按钮时切换段落的可见性来实现相同的功能：

＆＃13;

<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility();">
<p id="para_1">display this is on load and second click</p>
<p id="para_2" style="display:none">display this on first click</p>

＆＃13;

window.setVisibility = function() {
  var $para = $("p");
  $para.toggle();
}

＆＃13;

Answer 2

您传递给setVisibility(...)函数的参数始终为para_2，这意味着您不会以任何方式更改ID为para_1的段落。

没有必要将任何参数传递给此函数，只需将一个元素设置为可见，另一个元素隐藏在if和else块中，这是一个示例：< / p>

window.setVisibility = function() {
       if (document.getElementById('bt1').value == 'Hide Layer') {
         document.getElementById('bt1').value = 'Show Layer';
         document.getElementById('para_1').style.display = 'none';
         document.getElementById('para_2').style.display = 'inline';
       } else {
         document.getElementById('bt1').value = 'Hide Layer';
         document.getElementById('para_1').style.display = 'inline';
         document.getElementById('para_2').style.display = 'none';
       }
}
setVisibility();

<input type=button name=type id='bt1' value='Show Layer'    onclick="setVisibility();">
<br><br>
<p id ="para_1"> display this is on load and second click</p>
<p id ="para_2"> display this on first click </p>

Answer 3

这是一个使用JQuery来执行此功能的解决方案。它只是检查第一段是否可见，如果隐藏它并显示第二段，如果不是则相反。

＆＃13;

$(document).ready(function() {
  $('#para_2').hide();

  $('#swapBtn').on('click', function(event) {
    if ($('#para_1').is(':visible')) {
      $('#para_2').show();
      $('#para_1').hide();
    } else {
      $('#para_2').hide();
      $('#para_1').show();
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <input type=button name=type id='swapBtn' value='Show Layer'>

  <p id="para_1"> display this on load and second click</p>
  <p id="para_2"> display this on first click </p>
  <br>
  <br>
</body>

＆＃13;

Answer 4

您的代码中存在一些错误。我已经为你纠正了它们。

<html>
<body>
<script language="JavaScript">   
function setVisibility(id)  {
    if (document.getElementById('bt1').value=='Hide Layer') { 
        document.getElementById('bt1').value = 'Show Layer';
        document.getElementById(id).style.display = 'none'; 
    }
    else { 
        document.getElementById('bt1').value = 'Hide Layer';
        document.getElementById(id).style.display = 'block'; 
    } 
} 
</script> 
<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility('para_2')"> 
<p id ="para_1"> display this is on load and second click</p> 
<p id ="para_2" style='display:none'> display this on first click </p> 
<br><br> 
</body> 
</html>

主要的错误是：

para_2在文档加载时可见，因为您没有指定＆display：none＆＃39;为了它。
使用display：block而不是display：inline

在HTML中单击按钮时显示带有不同ID的段落

4 个答案: