js如何讓li指向對應的a標簽

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標簽前呈現符號圖標了。

發表于 2018-07-27 00:00
閱讀 ( 661 )
分類：其他類型

js如何讓li指向對應的a標簽

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章