JavaScript-javascript 点击后修改ID
<li class="abc"><a href="#">aaaaaaa</a></li>
<li class="abc"><a href="#">aaaaaaa</a></li>
<li class="bbc"><a href="#">aaaaaaa</a></li>
<li class="abc"><a href="#">aaaaaaa</a></li>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
楼上回答很不错了 推荐使用事件委托 给老大绑定一个时间 然后让他们冒泡 并且从现在js角度来看 不要对href绑定js函数
不知道你用不用jQuery之类的库, 用这些库会方便很多.
如果不用库的, 大概是这样的.
<script>
function test()
{
this.parentNode.className = "BBC";//设置className各个浏览器行为可能不一致.
//这里的this就指向了<a>了
}
</script>
<li class="abc"><a href="javascript:test();">aaaaaaa</a></li>
不用jquery类库的话，可以按照这样想。先获取所有的<a> 然后为<a>附加一个点击事件：把父亲的className改成bbs。获取元素可以有getElementById、getElementsByTagName等方法很灵活可以取到<a>。纤细代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<style type="text/css">
#h { width: 500px; height: 300px; }
#h ul { margin: 0; padding: 0; list-style: none; }
.abc { width: 50px; height: 20px; float: left; margin-left: 20px; font-size: 12px; line-height: 20px; border: 1px solid #00C; }
.abc a { text-decoration: none; }
.bbc { width: 50px; height: 20px; float: left; margin-left: 20px; font-size: 12px; line-height: 20px; border: 1px solid #00C; background: #FF0000; }
</style>
<div id="h">
<ul>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);">aaaaaaa</a></li>
</ul>
</div>
<script>
var content = document.getElementById('h');//获取id为h的div
if (content) {
var links = content.getElementsByTagName('a');//获取h中所有的<a>
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {//依次为<a>附加点击事件
this.parentNode.className = 'bbc';
};
}
}
</script>
</body>
</html>
如果要更加方便的话：可以连js都省掉，只是两种附加click的方法，原理一样
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<style type="text/css">
#h { width: 500px; height: 300px; }
#h ul { margin: 0; padding: 0; list-style: none; }
.abc { width: 50px; height: 20px; float: left; margin-left: 20px; font-size: 12px; line-height: 20px; border: 1px solid #00C; }
.abc a { text-decoration: none; }
.bbc { width: 50px; height: 20px; float: left; margin-left: 20px; font-size: 12px; line-height: 20px; border: 1px solid #00C; background: #FF0000; }
</style>
<div id="h">
<ul>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
<li class="abc"><a href="javascript:void(0);" onclick="this.parentNode.className='bbc';">aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
从性能优化角度来说
如果元素是重复的结构，可利用事件冒泡机制
//ulId为ul的id
document.getElementById('ulId').onclick = function(e){
//获取触发点击的元素
var event = e || window.event,
target = event.srcElement || event.target;
//修改li的class
target.parentElement.className = 'BBC';
}