用html css js實現選項卡切換效果

2021-07-10 20:11:07 字數 638 閱讀 8195

使用之前學過的綜合知識,實現乙個新聞門戶**上的常見選項卡效果:

文字素材:

房產: 275萬購昌平鄰鐵三居 總價20萬買一居

200萬內購五環三居 140萬安家東三環

北京首現零首付樓盤 53萬購東5環50平

京樓盤直降5000 中信府 公園樓王現房

家居: 40平出租屋大改造 美少女的混搭小窩

經典清新簡歐愛家 90平老房煥發新生

新中式的酷色溫情 66平撞色活潑家居

瓷磚就像選好老婆 衛生間煙道的設計

二手房:

通州豪華3居260萬 二環稀缺2居250w甩

西3環通透2居290萬 130萬2居限量搶購

黃城根小學學區僅260萬 121平70萬拋!

獨家別墅280萬 蘇州橋2居***248萬

先分析基本思路。首先編寫html,然後再載入樣式,最後用js修改相應的dom,達到更改選項卡和內容的目的。

html顯示的是所有與文字有關的資訊,所以在這個頁面中與文字有關的資訊為上面選項卡的三個標題,以及選項卡的內容。 

於是決定標題使用

選項卡套選項卡

實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換,且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器,乙個控制外層選卡,乙個控制內層選卡。仔細分析發現,外層選項卡的切換是需要在內層選卡全部切換完...

vue 選項卡 typecho tabs選項卡外掛程式

在看技術文件的時候發現使用選項卡來呈現示例 是個很不錯的方式,既可以節約版面空間還清晰明了,比如下面這個簡單的vue宣告式渲染demo 實際執行效果 明顯比順序排下來好多了,剛開始在網上搜尋typecho此類外掛程式一直沒有找到,所以乾脆自己動手擼乙個,最後就在typecho的預設helloworl...

選項卡的實現

1 是指令,相當於v on 2 是繫結,相當於v bind 3 正常使用class class box divbox 4 三元表示式 條件 true false doctype html en utf 8 viewport content width device width,initial sca...