JS實現(xiàn)點擊鏈接切換顯示隱藏內容的方法
更新時間：2017年10月19日 09:45:38 作者：spfLinux
這篇文章主要介紹了JS實現(xiàn)點擊鏈接切換顯示隱藏內容的方法,涉及javascript鼠標事件響應及頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)點擊鏈接切換顯示隱藏內容的方法。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn 點擊鏈接切換顯示隱藏內容</title>
<style>
a {
cursor: pointer;
color: red;
}
#p1, #p2 {
display: none;
}
</style>
</head>
<body>
<a onclick="con(1)">顯示內容1</a>
<a onclick="con(2)">顯示內容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>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
相關文章
window.print()前端實現(xiàn)網(wǎng)頁打印功能詳解
JavaScript 函數(shù)window.print()可用于打印你的應用的內容,但是它針對的是使用默認打印體驗打印顯示在屏幕上的內容,這篇文章主要給大家介紹了關于window.print()前端實現(xiàn)網(wǎng)頁打印功能的相關資料,需要的朋友可以參考下2024-04-04
javascrit中undefined和null的區(qū)別詳解
這篇文章主要介紹了javascrit中undefined和null的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)樹形下拉框的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了Redux中進行異步操作(網(wǎng)絡請求)的方案,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
之前做過一個生成漸變字體的簡單演示今天閑著沒事就把這個功能完善了，把JS代碼封裝成一個類，載入頁面就可以使相應的HTML元素內部的字體產(chǎn)生漸變色。2008-11-11
TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
這篇文章主要介紹了TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法，文中通過代碼示例講解的非常詳細，對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-03-03
實現(xiàn)select跳轉的方法有很多，本例為大家介紹的是js實現(xiàn)的，通過location.href獲取跳轉地址，需要的朋友可以看看2014-10-10
reduce是一個對數(shù)組累積操作的方法,使用時要加上 return 返回累積操作的數(shù)據(jù),這樣 prev 才能獲取上一次執(zhí)行的結果,否則是 undefined,這篇文章主要介紹了JS 中 reduce()方法及使用詳解,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關于ES6入門教程之let、const使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了基于JS實現(xiàn)頁面懸浮框的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12