こんにちは、私のプロジェクトの友人たちの要件です。ご覧のとおり、アンカータグをボタンの外観に変換したいと考えています。これは私の jsp コードです。間違っているところを修正してください。css リンクは完璧です。アンカータグをクリックすると、トグルする必要があります。事前に感謝します
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@taglib uri="/struts-tags" prefix="s" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" href="css/fotorama.css"/>
<title>Islam WedLock</title>
<script type="text/javascript" src="js/fotorama.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<link type="text/css" href="css/south-street/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<s:head />
<sj:head jqueryui="true" />
<script type="text/javascript">
$(function() {
// set effect from select menu value
$("#button").button();
$( "#button" ).click(function() {
$( "#effect" ).toggle("blind");
return false;
});
$.subscribe('hideTarget', function(event, data) {
$('#'+event.originalEvent.targets).hide("blind");
$( "#effect" ).hide();
});
});
</script>
</head>
<body>
<div class="wrapper">
<%@include file="header.jsp"%>
<!-- content -->
<div>
<table>
<tr>
<td>
<div class="demo">
<a href="#" id="button">Upload Files</a>
<div id="effect" style="display:none;">
<s:form action="fileUpload" method="post" theme="xhtml" enctype="multipart/form-data" >
<s:file name="userImage" id="fileinput" label="User Image" />
<sj:submit targets="result" effect="blind" effectMode="show" onEffectCompleteTopics="hideTarget" value="Upload" button="true" />
</s:form>
<br/>
<img id="indicator" src="progressbar.gif" style="display:none" alt="loading"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<sj:div onEffectCompleteTopics="hideTarget" cssClass="ajaxdiv" cssStyle="display:none;" id="result"></sj:div>
</td>
</tr>
</table>
</div>
<!-- End -->
<%@include file="footer.jsp"%>
</div>
</body>