Js實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色突出顯示其他a標(biāo)簽回復(fù)原色
更新時(shí)間：2013年11月27日 15:56:31 作者：
當(dāng)一個(gè)頁面有多個(gè)a標(biāo)簽，實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色，其他a標(biāo)簽回復(fù)原色，具體實(shí)現(xiàn)如下，喜歡的朋友可以參考下
當(dāng)一個(gè)頁面有多個(gè)a標(biāo)簽，且點(diǎn)擊后會(huì)跳轉(zhuǎn)至當(dāng)前頁面，如何實(shí)現(xiàn)被點(diǎn)擊標(biāo)簽變色突出顯示，其他標(biāo)簽回復(fù)原色呢？
利用JS可實(shí)現(xiàn)：
假設(shè)當(dāng)前頁面是“1.aspx”
1. 給a標(biāo)簽ID設(shè)值：
<a href="1.aspx?id=1" id="1" target="_parent">""</a>
<a href="1.aspx?id=2" id="2" target="_parent">""</a>
<a href="1.aspx?id=3" id="3" target="_parent">""</a>
2. 寫JS方法：
<script>
&(document).ready(function(){
var id = windows.ulr.substring(windows.ulr.IndeOf("?id="),1) //取得id值
var currtA = document.getElementById(id); //取得當(dāng)前被點(diǎn)擊a標(biāo)簽
if(currtA != null)
currtA.style.color = "#f00";
});
</script>
對(duì)于其他情況，如點(diǎn)擊a標(biāo)簽頁面不跳轉(zhuǎn)，則可以這樣寫：
<a href="#" onclick="changeCss(this)">""</a>
<script>
function changeCss(obj){
var alist = document.getElementsByTagName("a");
for(var i =0;i < alist.Length;i++){
alist[i].style.color = "#000"; //給所有a標(biāo)簽賦原色
}
obj.style.color = "#f00"; //令當(dāng)前標(biāo)簽高亮
}
//當(dāng)然也可以用Jquery的$("a").removeCss() 和addCss()來實(shí)現(xiàn)
</script>
利用JS可實(shí)現(xiàn)：
假設(shè)當(dāng)前頁面是“1.aspx”
1. 給a標(biāo)簽ID設(shè)值：
復(fù)制代碼 代碼如下:
<a href="1.aspx?id=1" id="1" target="_parent">""</a>
<a href="1.aspx?id=2" id="2" target="_parent">""</a>
<a href="1.aspx?id=3" id="3" target="_parent">""</a>
2. 寫JS方法：
復(fù)制代碼 代碼如下:
<script>
&(document).ready(function(){
var id = windows.ulr.substring(windows.ulr.IndeOf("?id="),1) //取得id值
var currtA = document.getElementById(id); //取得當(dāng)前被點(diǎn)擊a標(biāo)簽
if(currtA != null)
currtA.style.color = "#f00";
});
</script>
對(duì)于其他情況，如點(diǎn)擊a標(biāo)簽頁面不跳轉(zhuǎn)，則可以這樣寫：
復(fù)制代碼 代碼如下:
<a href="#" onclick="changeCss(this)">""</a>
<script>
function changeCss(obj){
var alist = document.getElementsByTagName("a");
for(var i =0;i < alist.Length;i++){
alist[i].style.color = "#000"; //給所有a標(biāo)簽賦原色
}
obj.style.color = "#f00"; //令當(dāng)前標(biāo)簽高亮
}
//當(dāng)然也可以用Jquery的$("a").removeCss() 和addCss()來實(shí)現(xiàn)
</script>
相關(guān)文章
使用JavaScript italics方法實(shí)現(xiàn)文本變斜體教程示例
這篇文章主要為大家介紹了JavaScript italics實(shí)現(xiàn)文本變斜體教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能,涉及javascript針對(duì)頁面元素的遍歷及動(dòng)態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)
這篇文章主要介紹了JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法,涉及javascript字符串截取操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
“return false”之所以被誤用的如此厲害，是因?yàn)樗雌饋硐袷峭瓿闪宋覀兘唤o它的工作，瀏覽器不會(huì)再將我們重定向到href中的鏈接，表單也不會(huì)被繼續(xù)提交，但這么做到底有什么不對(duì)呢2013-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序頁面生命周期的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了微信小程序點(diǎn)擊保存圖片到本機(jī)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
JS實(shí)現(xiàn)網(wǎng)頁右側(cè)帶動(dòng)畫效果的伸縮窗口代碼
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁右側(cè)帶動(dòng)畫效果的伸縮窗口代碼,通過JavaScript基于時(shí)間函數(shù)實(shí)現(xiàn)頁面元素樣式漸變效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了js判斷元素是否隱藏的方法,需要的朋友可以參考下2014-06-06
文字滾動(dòng)顯示，是網(wǎng)頁企業(yè)公告，文字鏈廣告常用的一種效果，說不定在什么時(shí)候你就能看到它。2010-05-05