快捷導(dǎo)航

javascript實現(xiàn)鏈接單選效果的方法

更新時間：2015年05月13日 15:32:08 作者：永遠愛好寫程序

這篇文章主要介紹了javascript實現(xiàn)鏈接單選效果的方法,可實現(xiàn)點擊鏈接改變其背景色的功能,同時可禁用對應(yīng)鏈接的跳轉(zhuǎn),需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)鏈接單選效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鏈接單選</title>
<script type="text/javascript">
function IniEvent() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
 links[i].onclick = LinkOnClick;
  }
}
function LinkOnClick() {
  var links = document.getElementsByTagName("a");
  //links在兩個地方用到了(IniEvent也用到了),
  //注意，不要把links放到全局變量中，
  //盡量不要用全局變量，
  //如果重復(fù)性代碼太多，將代碼放到一個公共函數(shù)中
  for (var i = 0; i < links.length; i++) {
 if (links[i] == this) {
   links[i].style.background = "red";
 }
 else {
   links[i].style.background = "white";
 }
  }      
  window.event.returnValue = false;//防止導(dǎo)航到網(wǎng)站
}
</script>
</head>
<body onload="IniEvent()">
<a >百度</a><br />
<a >搜狐</a><br />
<a href="http://www.fzitv.net">腳本之家</a><br />
<a >土豆</a><br />
<a >CSDN</a><br />
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

模仿JQuery.extend函數(shù)擴展自己對象的js代碼
最近打算寫個自己的js工具集合，把自己平常經(jīng)常使用的方法很好的封裝起來，其中模仿了jq的結(jié)構(gòu)。
2009-12-12
swiper+echarts實現(xiàn)多個儀表盤左右滾動效果
這篇文章主要為大家詳細介紹了swiper+echarts實現(xiàn)多個儀表盤左右滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
js中作用域的實例解析
本文主要通過幾個實例對js中作用域進行詳細解析，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
javascript?中動畫制作方法?animate()屬性
這篇文章主要介紹了javascript?中動畫制作方法?animate()屬性，animate是所有dom元素都有的方法，可以用來最做過度動畫，關(guān)鍵幀動畫，下面文章的相關(guān)介紹需要的小伙伴可以參考一下
2022-04-04
ES6使用新特性Proxy實現(xiàn)的數(shù)據(jù)綁定功能實例
這篇文章主要介紹了ES6使用新特性Proxy實現(xiàn)的數(shù)據(jù)綁定功能,結(jié)合具體實例形式分析了ES6使用Proxy實現(xiàn)數(shù)據(jù)綁定具體原理、操作步驟與相關(guān)注意事項,需要的朋友可以參考下
2020-05-05
javascript操作excel生成報表全攻略
這篇文章主要介紹了如何使用javascript操作excel生成報表,需要的朋友可以參考下
2014-05-05
js實現(xiàn)點擊添加一個input節(jié)點
本文給大家分享的是一段點擊自動添加inpu節(jié)點的代碼，非常的簡單實用，這里推薦給大家。
2014-12-12
微信小程序?qū)W習(xí)之wxs使用教程
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之wxs使用教程的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
javascript實現(xiàn)添加附件功能的方法
這篇文章主要介紹了javascript實現(xiàn)添加附件功能的方法，在我們編輯信息時，有時候需要附加文件、圖片實現(xiàn)上傳功能，通過本文了解javascript是如何實現(xiàn)附加功能的，請閱讀。
2015-11-11
有關(guān)Promises異步問題詳解
這篇文章主要介紹了有關(guān)JavaScript Promises異步問題詳解的相關(guān)資料,需要的朋友可以參考下
2015-11-11