web開發》選項卡切換功能

2021-07-24 06:29:57 字數 1680 閱讀 2575

效果:滑鼠移動到某個選項卡就顯示哪個  

原理:下面是5個對應的div,上面的選項卡滑鼠移動到哪個就讓對應的div顯示其他的隱藏。

**:

id="detail_title"

>

οnmοuseοver=

"showdiv(1)"

>href=

"">商品詳情

οnmοuseοver=

"showdiv(2)"

>href=

""οnmοuseοver=

"showdiv(3)"

>href=

"">付款方式

οnmοuseοver=

"showdiv(4)"

>href=

"">送貨方式

οnmοuseοver=

"showdiv(5)"

>href=

"">相關商品

id="detail_info"

>

id="info1"

class=

"detail_info_same"

style=

"display: block"

>

商品詳情 今天是個好日子啊啊肌膚和收費幾點睡覺說的就是姐姐姐姐是我我我

打卡的技能放你們是誰水水水水是快樂啦啦啦啦啦啦啦啦了

id="info2"

class=

"detail_info_same"

style=

"display: none"

>

id="info3"

class=

"detail_info_same"

style=

"display: none"

>

id="info4"

class=

"detail_info_same"

style=

"display: none"

>

送貨方式 一般採用快遞 需要順豐請提前說明

id="info5"

class=

"detail_info_same"

style=

"display: none"

>

相關商品 還有很多商品您自己選擇哈

css:

#detail_title

#detail_title

div#detail_title

div a

#detail_title

div a:hover

#detail_info

js:

//切換選項卡功能

functionshowdiv(number)else}}

選項卡切換

方法一 class box class title 111h2 222h2 333h2 444h2 div class cont 第乙個新聞內容p 第二個新聞內容p 第三個新聞內容p 第四個新聞內容p div div var ah2 document.queryselectorall title h...

選項卡切換

引用 相信使用過android手機的朋友都見過下面樣子的選項卡,本文我們嘗試做的演示。這個選項卡頁面,或者說是標籤卡。分為兩部分 乙個頂部的按鈕 可點選的 的切換卡部分 乙個主內容區 上圖顯示 第二個窗體 字型的 的主顯示區。我們想實現的效果是點選切換的選項卡卡部分,主顯示區的內容隨之改變。那麼我們...

react tab選項卡切換

tab選項卡切換是個很常見也很簡單的小功能,用原生js和jq去寫的話可能不到20行 就搞定so easy。但是用react去實現就沒那麼容易了 是自己react比較菜 由於最近在重新學習react就試著寫了乙個tab切換的小列子。還有多可優化的地方希望能拋磚引玉 簡單寫了點注釋 html js im...