需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签中，输入js代码：
$('#open').click(function () {$(this).text('改了')})
3、浏览器运行index.html页面，点击a标签，此时成功将内容变更为了“改了”。
<!--在<head>与</head>标签中写CSS代码，代码完成后调用就可以了，看示例：--><html>
<head>
<title>控制A标签中的链接文字</title>
<style
type="text/css">
.color{color:#3399CC
text-decoration:nonefont-weight:bold}/*链接设置*/
.color:visited{color:#3399CC
text-decoration:nonefont-weight:bold}/*访问过的链接设置*/
.color:hover{color:#CF0000
text-decoration:underlinefont-weight:bold}/*鼠标放上的链接设置*/
/*
取消下划线只要把text-decoration:underline修改成text-decoration:none
文字加粗font-weight:bold
如不需要加粗显示，那么删除font-weight:bold就可以了
其它更多的参数设置参考：css2.0手册
其中的"伪类"说明
*/
</style>
</head>
<body>
<a
href="#"
class="color">控制A标签内的文字颜色,并且带下划线</a><!--
class="color"
是调用定义的.color
样式-->
</body>
</html>
a 的样式一般会有一个全局的来控制。我一般在reset样式里写：
a{color:#555text-decoration:noneoutline:none}
a:hover{text-decoration:underline}
然后后面需要a的时候在单独写他的样式
需要注意的是后面千万不要在写 a{。。。}这样的样式，因为这样写会影响整个网站，要想局部的效果那就 .xx a{...}这样的写法。
比如你的效果图代码：
<style>.nav{overflow:hiddenbackground-color:#eeeborder-bottom:1px solid #ddd}
.nav li{float:leftline-height:35px}
.nav li a{padding:0 10pxdisplay:blockfloat:left}
.nav li a:hover{background:#dddcolor:#0f0}
</style>
<ul class="nav">
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
</ul>
