原生js寫一個選項卡
html程式碼: <h2 class="active">選項卡1</h2> <h2>選項卡2</h2> <h2>選項卡3</h2> <div style="display:block;background-color:hotpink;">內容1</div> <div style="background-color:darkkhaki;">內容2</div> <div style="background-color:gray;">內容3</div> css程式碼: h2{ // 首先設定h2的寬高 ,將h2初始 化。 width:90px; height:30px; border:1px solid firebrick; float:left; text-align: center; border-bottom: 0; cursor: pointer; } div{ width:275px; height:300px; border:1px solid gray; display: none; position:absolute; left:7px; top:59px; } .active{ background:#B22222; color:white; }
js程式碼:
var oH2 = document.getElementsByTagName('h2'); var oDiv = document.getElementsByTagName('div'); // console.log(oDiv) for(var i = 0; i < oH2.length; i++){ oH2[i].index = i; oH2[i].onclick = function(){ for(var i = 0; i < oH2.length; i++){ oH2[i].className = 'null'; oDiv[i].style.display = 'none'; } this.className = 'active'; oDiv[this.index].style.display = 'block'; } }
相關推薦
原生js寫一個選項卡
html程式碼: <h2 class="active">選項卡1</h2> <h2>選項卡2</h2> <h2>選項卡3</h2>
原生js三種選項卡效果(輪播)
col val 還在 log pla absolut 自動播放 div pac 第三種:定時輪播切換(我這邊定時是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8"
原生js三種選項卡效果(點擊)
eight void log utf 觸發 nts lin type position 第一種:選項卡單擊點擊切換 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g
原生js三種選項卡效果(滑動)
window solid nts html opacity ont cor rip show 第二種:鼠標移入切換效果實現 <!DOCTYPE html> <html> <head> <meta charset
原生JS寫一個淡入淡出輪播圖
切換 splay get 自動 sele round pos 鼠標 name 任何網站主頁都離不開一個輪播圖,這是滾動播放新聞或者廣告或者內容的招牌,類型有很多,我們可以做一個淡入淡出的輪播圖。 首先分析,淡入淡出指的是沒有滑動效果,一張圖片消失的時候另一張圖片接著顯示出來
原生js實現tab選項卡切換功能
本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s
原生JS寫一個首字母排序的通訊錄效果
點選檢視效果demo 思路上先將要排序的資料進行漢字轉換成拼音,根據首字母進行分類,然後將分類後的資料都有哪些首字母放入右邊的導航中,並將分類好的資料渲染進頁面.最後給右邊的導航中加上點選事件並滾動到內容的對應位子. html <!DOCTYPE html>
用js寫簡單選項卡
如圖,最簡單的純粹的選項卡 第一步,當然是先寫html程式碼和css樣式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> &
原生JS寫了一個小demo,根據輸入的數字生成不同背景顏色的小方塊兒~
top == UNC 定位元素 demo TE tostring eight 地方 昨天練習寫了這個小demo,個人覺得通過設置定位元素left和top的值,來實現換行的功能,這種方法很巧妙~ 另外,如下代碼中的隨機顏色的獲取,還請各位前輩多多指教:需要改進的地方;或者有
怎麽用cookie做一個選項卡?
eight splay i++ 作用 code round tab 多網站 個性化 什麽是cookie? Cookies雖然一般都以英文名呈現,但是它還是有一個可愛的中文名“小甜餅”。Cookies是指服務器暫存放在你的電腦裏的txt格式的文本文件資料,主要用
js常用特效——選項卡效果
weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset
用原生js寫2048小遊戲
gin 小遊戲 替換 上下 數位 免費學習 title index.php parseint <!DOCTYPE html> <html> <head> <title> 2048-game </title&g
純JS制作選項卡--JavaScript實例集錦(初學)
不用 () body tel bsp classname nload html spl 最近重新從最基礎學習JavaScript,如同蓋房,先要打好基礎,一磚一瓦都很重要。 下面我來嘚吧幾句,附上從書上學到的實例與效果。 JS可以用面向過程去寫,也可以使用面向對象。面向對象
原生js做一個簡單的進度條
-i 隨機數函數 borde setw bubuko 原生 html 進度條 add 用原生js做進度條,布局非常簡單,一個盒子裏放一個span標簽,讓它的寬度為0,並且轉成塊元素。 主要用定時器動態增加span的寬度,並且當它的寬度大於父級盒子的寬度的時候停止 效果如下:
原生js實現一個DIV的碰撞反彈運動
絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動: 關鍵在於DIV的邊界檢測,進而改變運動方向,即可實現碰撞反彈效果。 <!DOCTYPE html> <html
用原生JS 寫Web首頁輪播圖
get ext ++ posit containe add adding time 按鈕 目前自己在學習JS中,用目前學到的東西寫了一個輪播圖,能完整的實現輪播圖的功能,但是肯定還是有不完善的地方,也希望大家能留言交流,一起學習。 一、思路 首先將功能一個一個理順
js 寫一個滾動條
兼容 absolut script name padding 位置 當前 sele osi <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
原生js寫的雪花效果,使用畫布
<!doctype html> <html> <head> <meta charset="utf-8"> <title>雪花效果,使用畫布</title> <script src="http://libs.baidu.co
如何用原生JS實現一個簡單的promise
我又又又回來了,最近真是累的跟狗一樣,急需一個大保健回覆一下子精力 我現在是一邊喝著紅牛一邊寫著部落格,好了好了,不扯了,迴歸整體好吧 先簡單來說一下啥是promise吧 它是什麼?Promise是一個方案,用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。 &n
用node.js寫一個jenkins發版指令碼
背景 每次到網頁裡手動發版有點煩,寫個指令碼來提高開發效率。 CFG 在 jenkins 設定裡獲取 API TOKEN。 把 host 和賬號密碼拼接起來就可以通過鑑權。 const token = { user: '', password: '', } const host = 'jen