熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Jquery 同輩元素選中/未選中效果

2013-11-15 12:04:54  來源: JSP教程 

  <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head runat="server">
<title>Jquery 同輩元素選中/未選中效果</title>
<script language="javascript" type="text/javascript" src="Scripts/jqueryminjs"></script>
<script type="text/javascript">
function selectchange(tempid) {
var alink = $("#linktable")find("span");
alinkeach(function () {
$(this)removeClass("templinkactive")addClass("templink");
});
$("#alink" + tempid)removeClass("templink")addClass("templinkactive");
}

</script>
<style type="text/css">
templinkactive
{
padding:px;
textdecoration:none;
backgroundcolor: #DA;
color:#ffffff;
}
templink
{
cursor:pointer;
padding:px;
textdecoration:none;
}
</style>
</head>
<body>
<form id="form" runat="server">
<table width=% id="linktable">
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行四列)</span>
</td>
</tr>
<tr>
<td>
<span id="alink" class=templink onclick="javascript:selectchange();">
模板(一行三列)</span>
</td>
</tr>
</table>
</form>
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20243.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.