手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery同辈元素选中/未选中效果的实例代码
Jquery同辈元素选中/未选中效果的实例代码
摘要:复制代码代码如下:Jquery同辈元素选中/未选中效果functionselectchange(tempid){varalink=$("#l...

复制代码 代码如下:

<!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">

<head runat="server">

<title>Jquery 同辈元素选中/未选中效果</title>

<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

function selectchange(tempid) {

var alink = $("#linktable").find("span");

alink.each(function () {

$(this).removeClass("templinkactive").addClass("templink");

});

$("#alink" + tempid).removeClass("templink").addClass("templinkactive");

}

</script>

<style type="text/css">

.templinkactive

{

padding:5px;

text-decoration:none;

background-color: #2788DA;

color:#ffffff;

}

.templink

{

cursor:pointer;

padding:5px;

text-decoration:none;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<table width='100%' id="linktable">

<tr>

<td>

<span id="alink001">

模板001(一行三列)</span>

</td>

</tr>

<tr>

<td>

<span id="alink002">

模板002(一行四列)</span>

</td>

</tr>

<tr>

<td>

<span id="alink003">

模板003(一行三列)</span>

</td>

</tr>

<tr>

<td>

<span id="alink004">

模板004(一行四列)</span>

</td>

</tr>

<tr>

<td>

<span id="alink005">

模板005(一行三列)</span>

</td>

</tr>

</table>

</form>

</body>

</html>

【Jquery同辈元素选中/未选中效果的实例代码】相关文章:

JS+CSS实现的拖动分页效果实例

剖析Node.js异步编程中的回调与代码设计模式

强制设为首页代码

jQuery实现转动随机数抽奖效果的方法

JQuery控制Radio选中方法分析

jQuery实现返回顶部效果的方法

jquery预加载图片的方法

JQuery球队选择实例

JavaScript的正则表达式中test()方法的使用

JQuery分屏指示器图片轮换效果实例

精品推荐
分类导航