Question

当我点击＆＃34;邀请代码＆＃34;时，以下代码段会显示邀请代码。但是，如果再次单击相同的链接，如何重新隐藏邀请代码？它可以在随后的点击来回循环的地方完成吗？我没有编写这段代码，只是将其修改为我的用途。我对这类事情还很陌生。谢谢！

<style>
    div.hide { display:none; }
    div.show { text-align:center; }
</style>



<script type='text/javascript'>
    function showText(show, hide) {
        document.getElementById(show).className = "show";
        document.getElementById(hide).className = "hide";
    }
</script>

<br>
<font color="red">-</font><a href="index.php">Home</a><font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>

Answer 1

只需使用此功能：

＆＃13;

function showText(id)
{
  var elem = document.getElementById(id);
  if(elem.style.display == 'none')
  {
	  elem.style.display = 'inline';
  }
  else
  {
	  elem.style.display = 'none';
  }
}

＆＃13;

<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>

＆＃13;

PS：这也适用于2个元素...

问候

Answer 2

使用布尔值

保存状态

var hided = true;
function showText(show,hide){
    if (hided){
        document.getElementById(show).className = "show";
        document.getElementById(hide).className = "hide";
    }
    else{
        document.getElementById(show).className = "hide";
        document.getElementById(hide).className = "show";
    }
    hided = !hided;
}

摆弄这段代码和你的一些html：fiddle，是不是预期的行为？

Answer 3

我真的没有看到节目类的使用。您可以在要切换的元素上切换隐藏类。假设您不需要show类，那么使用类似这样的classList.toggle函数

＆＃13;

function toggle(target){
  document.getElementById(target).classList.toggle('hide');
}

＆＃13;

.hide{ display:none }

＆＃13;

<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>

＆＃13;

Answer 4

<html>
<div ID="content" style="display:block;">This is content.</div>

<script type="text/javascript">
function toggleContent() {
  // Get the DOM reference
  var contentId = document.getElementById("content");
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block"; 
}
</script>

<button onclick="toggleContent()">Toggle</button>

</html>

//代码非常自我解释。

如何使用相同的链接＆＃34;重新隐藏＆＃34;以前通过Javascript隐藏的文字？

4 个答案: