利用JS和CSS实现点击一个link,使页面上某元素隐藏或显示,同时改变link字样的效果

本文介绍了一种在页面上实现面板展开与折叠效果的方法。通过点击根记录旁的符号来控制子记录的显示与隐藏,同时改变符号的显示状态。使用了HTML、JavaScript和JSF标签库来实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、背景阐述

   在一个panelGrid中,一条根记录下有若干条子记录,当点击根记录旁边的“+”符号时,子记录显示在页面上,并且符号由“+”变成“-”;当再次点击“-”符号时,子记录不显示,符号由“-”变成“+”。

二、实现方法

 1.页面代码:

  1. <h:form>
  2.     <h:panelGrid columns="1" cellpadding="5" rowClasses="" columnClasses="">

  3.         <h:panelGroup>
  4.             <f:verbatim>
  5.               <a href="javascript:hiddenOrShow()" id="linkSign">-</a>
  6.             </f:verbatim>
  7.             <h:outputText value="Title"/>
  8.         </h:panelGroup>

  9.         <h:panelGroup id="subTitles">
  10.             <h:outputText value="subtitle 1"/>
  11.             <h:outputText value="subtitle 2"/>
  12.             <h:outputText value="subtitle 3"/>
  13.         </h:panelGroup>

  14.     </h:panelGrid>
  15.  <h:form>
 2.JS代码:

  1. <script type="text/javascript">
  2.         //<![CDATA[
  3.             function hiddenOrShowPanel(){
  4.                 if(document.getElementById("form:subTitles").style.display=='none'){
  5.                     document.getElementById("form:subTitles").style.display='';
  6.                     document.getElementById("linkSign").innerHTML="-";
  7.                 }
  8.                 else{
  9.                     document.getElementById("form:subTitles").style.display='none';
  10.                     document.getElementById("linkSign").innerHTML="+";
  11.                     }
  12.                 }
  13.     //]]>
  14.         </script> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值