多语言展示
当前在线:650今日阅读:60今日分享:41

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

js如何让li指向对应的a标签?也就是点到哪个a标签,那个a标签前面才出去li的符号图形。要达到这个目标,我们可以通过动态修改li标签的样式来实现,具体操作请大家跟随小编一起来看看吧。
方法/步骤
1

搭建测试环境打开记事本,输入以下代码:                 LI指向当前A标签                  

     

   保存成网页文件test.html。如不清楚如何保存,请查看下面经验前面创建网页部分。

2

创建点击A标签后的LI样式我们为点击A标签后的LI新建一个样式,样式名为newli,具体样式如下:.newli{list-style:square;}该代码放在head标准中的标签对内,如下图所示。

3

为所有A标签增加onclick事件通过遍历文档内所有的A标签,为其添加onclick事件,响应动作是弹出一个信息提示。在标签后加入以下代码:   

4

完善onclick事件响应动作在function()函数中将“alert('我是个A标签。');”代码修改成如下代码:this.parentNode.className='newli';修改“被点击的”A标签所在LI标签的样式为newli。

5

目标达到了吗?保存后刷新浏览器,点击一个A标签,A标签前出现了符号图标,好像已经达到任务要求,但再次点另一个A标签,该A标签前也能正常出现符号图标,但第一个A标签前出现的符号图标却仍然存在,这与我们的需求不相符,代码还需完善。

6

重置所有LI标签样式我们可以在改变“被点击标签”样式前,先将所有的LI标签样式重置,从而实现我们需要效果。修改代码如下:    这样,就会在点击的A标签前出现符号图标了。

推荐信息