選項卡切換

2021-10-04 05:18:55 字數 1663 閱讀 2493

方法一

class

="box"

>

class

="title"

>

>

111h2

>

>

222h2

>

>

333h2

>

>

444h2

>

div>

class

="cont"

>

>

第乙個新聞內容p

>

>

第二個新聞內容p

>

>

第三個新聞內容p

>

>

第四個新聞內容p

>

div>

div>

// var ah2 = document.queryselectorall(".title h2")

// var ap = document.queryselectorall(".cont p")

var ah2 =$(

".title h2"

)var ap =$(

".cont p"

)// 遍歷元素 

// 這裡我們要通過for迴圈去獲取li中的索引,然後成功的運用到下面的div中。

for(

var i =

0; i < ah2.length; i++

)// 顯示

ap[this

.index]

.style.display =

"block";}

}<

/script>

方法二

class

="tabs"

>

href

="#xiangmu"

>

專案資訊a

>

href

="#kehu"

>

客戶a>

href

="#wenda"

>

職位提問a

>

div>

"xiangmu"

class

="tab"

>

專案資訊div

>

"kehu"

class

="tab"

>

客戶div

>

"wenda"

class

="tab"

>

職位提問 div

>

$(

function()

);//獲取從url中傳遞的

var url = window.location.href;

var reg =

/#.+/;if

(reg.

test

(url))}

);<

/script>

選項卡切換

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

react tab選項卡切換

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

選項卡(點選切換)

275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 40平出租屋大改造 美少女的混搭小窩 經典清新簡歐愛家 90平老房煥發新生 新中式的酷色溫情 66平撞色活潑家居 瓷磚就像選好老婆 ...