Javascript-显示命令链接，然后消失

Javascript - showing a commandLink and then Disappearing

本文关键字：然后 消失 链接 显示 命令 Javascript-      更新时间：2023-09-26

我正在开发JSF应用程序，想要一个简单的函数-单击commandbutton并显示commandLink。我做了一个测试。代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
 <head>
  <script type="text/javascript">
   function testfunc() {
     document.getElementById("testForm:test").style.display="block";
     document.getElementById("testForm:test").style.visibility="visible";
   }
   </script>
 </head>
<body>
   <h:form id = "testForm" >
     <h:panelGroup id="test" style="display:none" >
          <h:commandLink value="Page 1" action="page1" /><br/>
     </h:panelGroup>
     <button onclick="testfunc()">Click me</button>
  </h:form> 
 </body>
</html>

问题是显示的链接-<h:commandLink value="Page 1" action="page1" />立即消失。有人有什么建议吗？非常感谢！

我将您的xhtml更改为，它可以工作。我将按钮的类型改为按钮，而不是默认的提交。我还把body改成了h:body。你可以像我一样保留panelGroup或使用panelGrid。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">
    <head>
     <script type="text/javascript">
     function testfunc() {
      document.getElementById("testForm:test").style.display="block";
    document.getElementById("testForm:test").style.visibility="visible";
    }
   function hidefunc() {
     document.getElementById("testForm:test").style.display="none";
     document.getElementById("testForm:test").style.visibility="hidden";
   }
    </script>
</head>
<h:body>
  <h:form id = "testForm" >
      <h:panelGrid id="test" style="display:none" >
        <h:commandLink value="Page 1" action="page1" /><br/>
       </h:panelGrid>
       <button onclick="testfunc()" type="button">Show me</button>
       <button onclick="hidefunc()" type="button">Hide me</button>
     </h:form> 
    </h:body>
 </html>
相关文章：