javascript 卡片切換

2021-07-25 09:30:51 字數 542 閱讀 8657

卡片切換···並且下面的內容也跟著切換(看不懂就看圖···)

先說下思路

當滑鼠經過的時候 改變背景 並且下面的內容跟著改變

**

//傳參的時候傳遞的this 感覺會方便很多

非**文學

這裡偷懶 用的table 布局 

上面的文字用div包裹了下(加不加沒啥區別)

下面的內容用ul包裹  當滑鼠經過的時候 通過設定 ul 的隱藏 / 顯示 來達到 切換內容的效果

再看看css

除了設定了布局以外   還有兩個方法是為了在js中呼叫  給classname 設定的qwq 直接看js吧

js中設定了乙個classname 是為了設定滑鼠移動時的樣式改變  其他的無非就是 ul的顯示 / 隱藏 達到內容跟著一起切換的效果

vuetify treeview切換卡片

效果圖記錄一下自己初學vuetify的一些心得。在官方文件中雖然有個簡單的切換卡片的例子,但對於初學者來說可能過於難懂。於是自己踩過許多坑之後總結了一些關鍵點,希望對後來的一些初學者有幫助。active.sync active items items activatable open on clic...

javascript中處理陣列來生成卡片

前面的html css 類似,以下是修改js 指令碼3 6 這個指令碼限制了每一列中值的範圍 window.onload initall function initall else function setsquare thissquare 解 釋 1.var colplace new array ...

在uniapp和vue中控制卡片切換

動態繫結class,資料雙向繫結 卡片結構 一 動態繫結class,資料雙向繫結 template 如下 change 0 class class title item 已發布 view change 1 class class title item 審批中 view script部分 在data中...