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