要清楚,我有一个具有某种风格的div,当我点击这个div中的commandButton时,我想将display属性设置为“none”。
我希望通过单击commandButton来改变css样式。
所以这是我的xhtml:
<div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
<h:commandButton image="resources/images/close Icon.png"
action="#{detailsPopUpManager.closePopUp()}"
class="closeIcon"/>
</div>
这是detailsPopUpManager代码:
@Named(value = "detailsPopUpManager")
@SessionScoped
public class DetailsPopUpManager implements Serializable {
private String style;
public DetailsPopUpManager() {
style = "width:500px;\n" +
"height:500px;\n" +
"background: graytext;\n" +
"position: absolute;\n" +
"right: 25%;\n" +
"top: 10px;\n" +
"z-index: 1;";
}
public String getStyle() {
return style;
}
public void setStyle(String style) {
this.style = style;
}
public void closePopUp()
{
style = "width:500px;\n" +
"height:500px;\n" +
"background: graytext;\n" +
"position: absolute;\n" +
"right: 25%;\n" +
"top: 10px;\n" +
"z-index: 1;\n" +
"display: none;";
}
感谢您的进一步帮助。
答案 0 :(得分:1)
您需要使用ajax来实现该结果。
<h:form id="myForm">
<div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
<h:commandButton image="resources/images/close Icon.png"
action="#{detailsPopUpManager.closePopUp()}"
class="closeIcon">
<f:ajax render="myForm"/>
</h:commandButton>
</div>
</h:form>