JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法

更新時(shí)間：2017年10月19日 09:45:38 作者：spfLinux

這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.dhdzp.com 點(diǎn)擊鏈接切換顯示隱藏內(nèi)容</title>
 <style>
  a {
   cursor: pointer;
   color: red;
  }
  #p1, #p2 {
   display: none;
  }
 </style>
</head>
<body>
 <a onclick="con(1)">顯示內(nèi)容1</a>
 <a onclick="con(2)">顯示內(nèi)容2</a>
 <p id="p1">11111</p>
 <p id="p2">22222</p>
 <script>
  flag = "p1";
  function con(i){ //參數(shù)傳遞時(shí)傳遞字符串似乎有問題，這里采用的是數(shù)字傳參
   document.getElementById(flag).style.display = "none";
   document.getElementById("p" + i).style.display = "inline";
   flag = "p" + i;
  }
 </script>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖的方法詳解
這篇文章將會(huì)給大家介紹了另外兩種可視化圖表，利用D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖，文章通過多個(gè)方面介紹的非常詳細(xì)，下面來一起看看吧。
2016-09-09
JS JSON對象轉(zhuǎn)為字符串的簡單實(shí)現(xiàn)方法
這篇文章主要介紹了JS中JSON對象轉(zhuǎn)為字符串的簡單實(shí)現(xiàn)方法。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法
這篇文章主要介紹了小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JavaScript中的console.log()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.log()函數(shù)詳細(xì)介紹,本文講解了什么是console.log()、兼容沒有調(diào)試控制臺的瀏覽器、使用參數(shù)、使用其它日志級別等內(nèi)容,需要的朋友可以參考下
2014-12-12
JS嚴(yán)格模式原理與用法實(shí)例分析
這篇文章主要介紹了JS嚴(yán)格模式原理與用法,結(jié)合實(shí)例形式分析了JS嚴(yán)格模式基本概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
ES6中Array.copyWithin()函數(shù)的用法實(shí)例詳解
ES6為Array增加了copyWithin函數(shù)，用于操作當(dāng)前數(shù)組自身，用來把某些個(gè)位置的元素復(fù)制并覆蓋到其他位置上去。下面重點(diǎn)給大家介紹ES6中Array.copyWithin()函數(shù)的用法，需要的朋友參考下
2017-09-09
JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能
這篇文章主要介紹了JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-06-06
javascript按鈕禁用和啟用的效果實(shí)例代碼
這篇文章主要介紹了javascript按鈕禁用和啟用的效果實(shí)例代碼,需要的朋友可以參考下
2017-10-10
layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例
今天小編就為大家分享一篇layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
JS正則表達(dá)式常見函數(shù)與用法小結(jié)
這篇文章主要介紹了JS正則表達(dá)式常見函數(shù)與用法,結(jié)合實(shí)例形式分析了JS正則表達(dá)式基本功能、常見函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下
2020-04-04