快捷導(dǎo)航

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

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

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

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

先來看看運行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>m.fzitv.net 點擊鏈接切換顯示隱藏內(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ù)字傳參
   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錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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