显示隐藏元素

-3

我有div和隐藏span就可以了。我想通过按钮点击来显示它。我的代码：显示隐藏元素

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>register page</title> 
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"> 
    <script type="text/javascript" src="/static/js/test.js"></script> 
    </head> 
    <body> 
    <form id="register-form">   
     <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label> 
     <input id="register-username-input" type="text" placeholder="Type username..."/> 
     <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button> 
     </form> 
    </div> 
    </body> 
</html>

我的js文件：

function show_element (id) { 
    document.getElementById(id).style.visibility = 'visible'; 
}

当我按下按钮，跨度不显示。为什么？它显示得非常快，而且再次隐藏。

Chrome开发人员工具控制台也不会显示错误。

谢谢。

来源

2013-03-20 0xAX

检查元素中的控制台显示什么？有错误吗？ js是否在header中起作用？如果不是，那么是否包含js文件？在被HTML调用之前函数是否可用？你是否将正确的ID传递给函数？ – user1240679 2013-03-20 10:13:28

您的代码在Chrome中运行：http://jsfiddle.net/cK6Nb/ - 您可以向我们展示JS在HTML文件中的位置吗？ – 2013-03-20 10:14:52

确保您发送正确的ID来show_element功能 – 2013-03-20 10:14:57

尝试增加return false到您的按钮的onClick（）事件。想要这样：

<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>

来源

2013-03-20 10:47:42 freshbm

-1

很抱歉，但此代码的工作：

<html> 

    <head> 

    <script> 
    function show_element (id) { 
     document.getElementById(id).style.visibility = 'visible'; 
    } 
    </script> 
    </head> 
    <body> 
    <div> 
    <span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span> 
     <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button> 
    </div> 

    </body> 
    </html>

编辑

我刚刚看了你的编辑。顺便说一句，我认为你的绝对路径可能导致问题。

试试这个代码：

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8" /> 
     <title>register page</title> 
     <link rel="stylesheet" href="./static/css/bootstrap.min.css"> 
     <script type="text/javascript" src="./static/js/test.js"></script> 
     </head> 
     <body> 
     <form id="register-form">   
      <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label> 
      <input id="register-username-input" type="text" placeholder="Type username..."/> 
      <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button> 
      </form> 
     </div> 
     </body> 
    </html>

来源

2013-03-20 10:15:36

更多的评论，而不是答案，你不会说？ – George 2013-03-20 10:16:26

也许是因为我只是改变了他的部分代码。我删除了结束标记，因为这是一个XML错误。顺便说一句，我添加HTML标签只是为了让他尝试该代码...只是看它是如何工作的... – 2013-03-20 10:18:01

你需要你的第一次调用函数之前定义功能正在取得进展。通常可以通过将函数代码放置在嵌套在HTML的head内的脚本标记中来实现。

像这样：

<head> 
    <script type="text/javascript"> 
    function show_element (id) { 
     document.getElementById(id).style.visibility = 'visible'; 
    } 
    </script> 
</head>

来源

2013-03-20 10:16:43 hjpotter92

显示隐藏元素

回答

相关问题