，一般用类名，如：<a
href="#"
class="style1"
id
=“a”>a标签</a>
.style1
{
color:#000
}
同时准备样式2
.style2{
color:#fff
}
在脚本事件中为a绑定点击事件：var
a
=
document.getElementById("a")
a.onclick=
function
(){a.className
=
"style2"
}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签中，输入js代码：
$('#open').click(function () {$(this).text('改了')})
3、浏览器运行index.html页面，点击a标签，此时成功将内容变更为了“改了”。
这个效果是靠CSS和JS结合做出来的。如下：<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0padding:0}
li{list-style:none}
#nav{margin:50pxposition:relative}
#nav li.current a{color:#f60}
#nav li{float:leftpadding:0 20pxheight:25px}
#nav li a{font:14px/25px '宋体'font-weight:boldcolor:#000text-decoration:none}
#nav li ul{display:noneposition:absoluteleft:0top:25pxwidth:500pxheight:25pxborder:1px solid #ccctext-align:center}
#nav li ul li{float:nonedisplay:inline-blockpadding:2px 0}
#nav li ul li a{display:inline-blockpadding:0 15pxfont:12px/12px '宋体'font-weight:normalborder-right:1px solid #000color:#000 !important}
#nav li ul li a:hover{text-decoration:underline}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#nav >li').hover(function(){ //hover是鼠标悬浮，click是鼠标点击。
$(this).addClass('current').siblings('li').removeClass('current')
$('#nav >li >ul').hide()
$(this).find('ul').show()
})
})
</script>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
<li><a href="#">产品四</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务四</a></li>
</ul>
</li>
<li><a href="#">支持</a>
<ul>
<li><a href="#">热线扶持</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
