點選 tab欄,可以切換效果.
點選 + 號, 可以新增 tab 項和內容項.
點選 x 號, 可以刪除當前的tab項和內容項.
雙擊tab項文字或者內容項文字可以修改裡面的文字內容
抽象物件: tab物件
該物件具有切換功能
該物件具有新增功能
該物件具有刪除功能
該物件具有修改功能
獲取到標題元素
獲取到內容元素
獲取到刪除的小按鈕 x號
新建js檔案,定義類,新增需要的屬性方法(切換,刪除,增加,修改)
時刻注意this的指向問題
mdn web文件：
查詢insertadjacenthtml用法
點選+可以實現新增新的選項卡和內容
一步:建立新的選項卡li和新的內容section
第二步:把建立的兩個元素追加到對應的父元素中.
現在高階做法:利用insertadjacenthtml()可以直接把字串格式元素新增到父元素中
點選x可以刪除當前的ii選項卡和當前的section
x是沒有索引號的,但是它的父親li有索引號,這個索引號正是我們想要的索引號
所以核心思路是:點選x號可以刪除這個索引號對應的ii和section
雙擊選項卡li或者section裡面的文字可以實現修改功能
雙擊事件是: ondblclick
如果雙擊文字，會預設選定文字,此時需要雙擊禁止選中文字
window.getselection? window.getselection().removeallranges(): document.selection.empty();
核心思路：雙擊文字的時候，在裡面生成乙個文字框當失去焦點或者按下回車然後把文字框輸入的值給原先元素即可.
tab欄切換布局
案例分析 1.tab欄切換有兩個大的模組 2.上面是模組選項卡，點選某乙個，當前的底色為紅色，其餘不變 排他思想 用修改雷鳴的方式 3.下面的模組內容，會跟隨上面的選項卡變化，所以下面的模組變化需要寫到點選事件裡面 4.規律 下面的模組顯示內容和上面的選項卡意義對應相匹配 5.核心思路 給上面的ta...
tab欄切換操作
最近在學js核心技術dom，順便寫寫筆記，記錄一下自己的學習成果。今天要記錄的是乙個比較常見的案例，就是切換，用的排他思想，首先我們看看所要達成的效果 點選售後保障出現售後保障的介面，點選商品評價，出現商品評價的模組。然後我們看看流程 商品介紹 li 41 li 規格與包裝 li 42 li 售後保...
jQuery實戰 tab欄切換
jquery實現tab欄切換 html結構 class active 第一欄li 第二欄li 第三欄li 第四欄li ul class content class tab selected 我是第一欄的內容div class tab 我是第二欄的內容div class tab 我是第三欄的內容div...