当前位置：网站首页 > 创业 > 正文

js如何让li指向对应的a标签

张子豪 2025-10-11 17:54 1

js若何让li指标的目的对应的a标签？也就是点到哪个a标签，阿谁a标签前面才出去li的符号图形。要达到这个方针，我们可以经由过程动态点窜li标签的样式来实现，具体操作请大师跟从小编一路来看看吧。

方式/步调

1
搭建测试情况
打开记事本，输入以下代码：
<html>
<head>
<meta charset="utf-8">
<title>LI指标的目的当前A标签</title>
<style>
li {
list-style:none;
}
</style>
</head>
<body>
<br/><br/>
<ul>
<li><a>雪碧</a></li>
<li><a>可乐</a></li>
<li><a>凉茶</a></li>
</ul>
</body>
</html>
保留当作网页文件test.html。如不清晰若何保留，请查看下面经验前面建立网页部门。
0怎么获取标签里多个的的值
2
建立点击A标签后的LI样式
我们为点击A标签后的LI新建一个样式，样式名为newli，具体样式如下：
.newli{list-style:square;}
该代码放在head尺度中的<style></style>标签对内，如下图所示。
3
为所有A标签增添onclick事务
经由过程遍历文档内所有的A标签，为其添加onclick事务，响应动作是弹出一个信息提醒。
在</body>标签后插手以下代码：
<script language=javascript>
var len=document.getElementsByTagName('a').length;
for(var i=0;i<len;i++)
{
document.getElementsByTagName('a')[i].onclick=function()
{
alert("我是个A标签。");
}
}
</script>
4
完美onclick事务响应动作
在function()函数中将“alert("我是个A标签。");”代码点窜当作如下代码：
this.parentNode.className='newli';
点窜“被点击的”A标签地点LI标签的样式为newli。
5
方针达到了吗？
保留后刷新浏览器，点击一个A标签，A标签前呈现了符号图标，仿佛已经达到使命要求，但再次点另一个A标签，该A标签前也能正常呈现符号图标，但第一个A标签前呈现的符号图标却仍然存在，这与我们的需求不相符，代码还需完美。
6
重置所有LI标签样式
我们可以在改变“被点击标签”样式前，先将所有的LI标签样式重置，从而实现我们需要结果。
点窜代码如下：
<script language=javascript>
var len=document.getElementsByTagName('a').length;
for(var i=0;i<len;i++)
{
document.getElementsByTagName('a')[i].onclick=function()
{
for(var j=0;j<len;j++)
{
document.getElementsByTagName('a')[j].parentNode.className="";
}
this.parentNode.className='newli';
}
}
</script>
如许，就会在点击的A标签前呈现符号图标了。