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

Question

我想点击图标来切换我的邮件。但我想要没有jquery的make。

你有个主意吗？

    <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;
}