javascript - 如何使项目在短时间内出现（Javascript 或 CSS）

Question

在我的一部分中，有一个按钮可能对用户不太可见，所以我想添加一个项目（例如“浏览此处”之类的电子邮件）以在用户按下相关按钮后显示加载并消失按钮。我认为它可以通过 CSS 动画来完成，但是通过按下按钮来删除它很热？！所以也许是Javascript。

那么有什么想法吗？谢谢。

Answer 1

据我所知，您可以使用 Javascript 添加/删除 HtML 页面的任何元素。

添加一个按钮（见链接）：

var btn = document.createElement("buttonId");
btn.innerHTML = "Click Me";
var divObj = document.getElementById("divId");
divObj.appendChild(btn);

删除一个项目（见链接）：

var btn = document.getElementById("buttonId");
btn.parentNode.removeChild(btn);

我没有检查代码，但这是我的猜测......

我能想到的另一种方法是您创建元素（如 div）并默认显示它。

<div onClick="hideMe(this)">Browse here</div>

然后创建一个 Javascript 函数，当您单击它时将“显示”设置为“无”：

function hideMe(clicked_element){
   clicked_element.style.display = "none";
}

Answer 2

如果是链接，您可以使用简单的 CSS

a:visited{
   display: none;
}

其他明智的好jquery

$('button').click( function(){ $(this).toggle() ));

并使用 javascript

<input type='button' onclick='hide(this);' />

function hide(clickedButton) {
   clickedButton.style.display = "none";
}

或 css 和 javascript

<input type='button' onclick='hide(this);' />

.hidden{
     display:none;
}

function hide(clickedButton) {
   clickedButton.className = "hidden";
}

如果它们是两个不同的按钮，那么 jquery

$('#triggerButton').click( function(){ $('#hideButton').toggle() ));

对于 javascript

<input type='button' id = 'trigger'+ onclick='hide(this);' />

function hide(clickedButton) {
   document.getElementById('hide').style.display = "none";
}

或 css 和 javascript

<input type='button' id = 'trigger' onclick='hide(this);' />

.hidden{
     display:none;
}

function hide(clickedButton) {
   document.getElementById('hide').className = "hidden";
}

希望这涵盖了您的问题。