Question

我希望点击按钮后我的隐藏div会不断显示。

这是我的js代码：

document.getElementById("share").onclick=function show(){
    document.getElementById("taskdiv2").style.visibility='visible';   
};

这是我的HTML代码：

<a id="share" onclick="show()" type="button" class="btn btn-lg btn-default"  href="">Share</a>

<div id="taskdiv2"  style="visibility:hidden" class="row">
    hiiiii !this is vivek.
</div>

Answer 1

删除inline onclick属性，因为您已使用JavaScript
添加event.preventDefault()，因为<a>元素的默认行为是导航。

document.getElementById("share").onclick = function(e) {
  e.preventDefault();
  document.getElementById("taskdiv2").style.visibility = 'visible';
};

<a id="share" type="button" class="btn btn-lg btn-default" href="">Share</a>

<div id="taskdiv2" style="visibility:hidden" class="row">
  hiiiii !this is vivek.
</div>

如果您期望toggle的可见度，

使用Element.classList.toggle

document.getElementById("share").onclick = function show() {
  document.getElementById("taskdiv2").classList.toggle('show');
};

.show {
  visibility: hidden;
}

<div id="taskdiv2">Content Goes Here!!!</div>
<button id="share">Toggle</button>

Answer 2

您使用了锚标记，因此它会尝试转到链接，除非您阻止默认：

document.getElementById("share").onclick=function show(event){
   event.preventDefault();
   document.getElementById("taskdiv2").style.visibility='visible';
};

或者将html锚点更改为按钮也可以解决问题，在这种情况下，不需要进行上述更改：

<button id="share" onclick="show()" type="button" class="btn btn-lg btn-default"  href="">Share</button>

如果您想要更好的编码标准，最好使用Rayon上面回答中提到的类来完成此操作。虽然根据您的要求，我只是将类添加到您的元素，而不是切换。

Answer 3

function becomevisible() {
  document.getElementById("div").style.opacity="1";
  }

div {
  background:red;
  height: 100px;
  width: 100px;
  opacity: 0;
  }

<div id="div">Test</div>
<button onclick="becomevisible()">See the div!</button>

Answer 4

try this one out :

document.getElementById("share").onclick = function show() {
  document.getElementById("taskdiv2").classList.toggle('show');
};
.show {
  visibility: hidden;
}
<div id="taskdiv2">Content Goes Here!!!</div>
<button id="share">Toggle</button>

如何通过使用javascript单击按钮使最初隐藏的div可见

4 个答案: