js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)功能
通過(guò)點(diǎn)擊按鈕查看相應(yīng)的介紹；按鈕相應(yīng)的變色；內(nèi)容相應(yīng)的切換；
html 文件
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>選項(xiàng)卡</title> <link rel='stylesheet' href='http://www.leifengta.com.cn/bcjs/css/style.css' ></head><body> <div id='box'> <button class='active'>HTML</button> <button>CSS</button> <button>JS</button> <div style='display: block;'>HTML稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</div> <div id='css'>層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。</div> <div id='js'>JavaScript（簡(jiǎn)稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的高級(jí)編程語(yǔ)言。雖然它是作為開發(fā)Web頁(yè)面的腳本語(yǔ)言而出名的，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο蟆⒚钍胶吐暶魇剑ㄈ绾瘮?shù)式編程）風(fēng)格。</div> </div> <script src='http://www.leifengta.com.cn/bcjs/src/script.js'></script></body></html>
css 文件
#box div { width: 400px; height: 300px; border: 1px solid black; display: none; padding: 10px;}#box .active { background-color: fuchsia;}button { margin: 10px 40px;}
js 文件
const oBox = document.querySelector(’#box’);const btn = oBox.getElementsByTagName(’button’);const div = oBox.getElementsByTagName(’div’);for(let i = 0; i < btn.length; i++) { btn[i].index = i; btn[i].onclick = function() { for(let j = 0; j < btn.length; j++) { btn[j].className = ’none’; div[j].style.display = ’none’; } this.className = ’active’; div[this.index].style.display = ’block’; }}
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP新手必備的基礎(chǔ)知識(shí)2. asp文件用什么軟件編輯3. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）4. js實(shí)現(xiàn)計(jì)算器功能5. golang中json小談之字符串轉(zhuǎn)浮點(diǎn)數(shù)的操作6. 通過(guò)IEAD+Maven快速搭建SSM項(xiàng)目的過(guò)程(Spring + Spring MVC + Mybatis)7. 利用CSS制作3D動(dòng)畫8. IDEA 2020.1.2 安裝教程附破解教程詳解9. Vue axios獲取token臨時(shí)令牌封裝案例10. JS中6個(gè)對(duì)象數(shù)組去重的方法
網(wǎng)公網(wǎng)安備