原聲JS仿京東編寫Tab切換選單

使用js原生實現tab切換選單

排他思想及自定義屬性

具體**如下：

html結構**

.cur

class
=>
class
="menu"
>
>
>
首頁li
>
>
列表1li
>
>
列表2li
>
>
列表3li
>
ul>
div>
class
="cont"
>
class
="item"
>
首頁內容div
>
class
="item"
>
列表1內容div
>
class
="item"
>
列表2內容div
>
class
="item"
>
列表3內容div
>
div>
div>

var li = document.

queryselectorall
('li');
var items = document.
queryselectorall
('item');
for(
var i =
0; i)this
.classname =
'cur'
;var curli =
this
.getattribute
('data-id');
for(
var k =
0; k) items[curli]
.style.display =
'block';}
)}

js 仿京東放大鏡

功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層，大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...

JS 仿京東放大鏡

滑鼠移動的時候黃色背景層跟著移動 16 content.addeventlistener mousemove function e else if maskx maskmax 30if masky 0 else if masky maskmax 35 mask.style.left maskx px...

JS 面向過程和物件導向實現 Tab選項卡切換

1 面向過程1.找到所有的按鈕 2.給按鈕新增事件 3.根據按鈕的下標顯示對應的內容 1.找到所有的按鈕 var btns document.queryselector btns children var boxs document.queryselectorall box for var i 0 ...