以下是一个框架,有2个列表。
如何实现点击A之后使字体变粗,再点B的时候A恢复原样,使B的字体变粗。
最好实现方法简单一点,谢谢!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>我是A</td>
</tr>
<tr>
<td>我是B</td>
</tr>
</table>
</body>
</html>
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签中,输入js代码:
$('td').click(function () {
$('td').css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
3、浏览器运行index.html页面,点击“我是A”,此时字体会变粗。
4、再点击“我是B”,此时“我是A”的字体粗度恢复正常,“我是B”的字体变粗。
JS也可以的,只要能解决就可以了
追答那我用JQ简单给你写一个吧!
$(document).ready(function(){
$("tr:first").click(function(){
$("tr:first td").css("font-weight","bold");
$("tr:last td").css("font-weight","");
});
$("tr:last").click(function(){
$("tr:first td").css("font-weight","");
$("tr:last td").css("font-weight","bold");
});
});