亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

編程挑戰

現在利用之前我們學過的JavaScript知識,實現選項卡切換的效果。

效果圖:

文字素材:

房產:

    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頁面布局

提示:
選項卡標題使用ul..li
選項卡內容使用div

二、CSS樣式制作

提示:
整個選項卡的樣式設置
選項卡標題的樣式設置
選項卡內容的樣式設置
一開始只顯示一個選項卡內容,其它選項卡內容隱藏。

三、JS實現選項卡切換

提示:
獲取選項卡標題和選項卡內容
選項卡內容多個,需要循環遍歷來操作,得知哪個選項卡和哪個選項內容匹配
通過改變DOM的css類名稱,當前點擊的選項卡顯示,其它隱藏。

 

?不會了怎么辦

HTML代碼:

css樣式式:

JS代碼:

||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?