在没有 jquery 的情况下切换文本

Question

我想在单击图标时切换我的邮件。 但我想制作没有 jquery。

你有什么想法吗？

    <a id="fa-envelope"><i class="fa fa-envelope" aria-hidden="true"></i></a>

    <p>yolo@gmail.com</p>

Answer 1

如果您的目标是完全无 JavaScript 的解决方案，您可以使用隐藏的复选框来实现这一点。

 #togglebox { display: none; } #fa-envelope { cursor: pointer; } #togglebox + p { display: none; } #togglebox:checked + p { display: block; }

 <link href="//fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> <label for="togglebox" id="fa-envelope"><i class="fa fa-envelope" aria-hidden="true"></i></label> <input type="checkbox" id="togglebox"><p>yolo@gmail.com</p>

Answer 2

<a id="fa-envelope" onclick="toggle(e)"><i class="fa fa-envelope" aria-hidden="true"></i></a>

<p id="toggle_mail">yolo@gmail.com</p>

js

function toggle(e) {
    e.preventDefault();
    document.getElementById("toggle_mail").innerHTML = "new email";
    return false;
}