對tab的一些思考

2021-10-09 00:14:55 字數 2596 閱讀 8065

思路想法:tab就是滑鼠懸停乙個元素的時候展示這個元素下拉的內容,因此我剛開始設計的時候就是tab的頭標題和它的內容在乙個元素裡面,讓他們關聯一致,滑鼠懸停時就加懸停的類名,元素內容進行diaplay:block的展示。

於是我的結構變成了這樣:

"box"

>

="outli"

>

"border-left: none;"

class

="current1"

>公告<

/p>

="inul current2"

>

資料七夕:金牛愛送玫瑰<

/li>

阿里打造"網際網路監管"

<

/li>

10萬家店60萬新品<

/li>

全球最大網上時裝周<

/li>

<

/ul>

<

/div>

="outli"

>

規則<

/p>

="inul"

>

「全額返現」要管控啦<

/li>

**新規發布彙總

(7月)

<

/li>

炒信規則調整意見反饋<

/li>

質量相關規則近期變更<

/li>

<

/ul>

<

/div>

<

/div>為了完成我心裡那個對於tab

標題內容是乙個整體的執著想法,我在js中的做法就是:當滑鼠移入outli的時候,先遍歷初始化,然後給它的大兒子加個選中的類名,讓它二兒子顯示就好了。好在最後執行結果比較完美:

但是拋開實現效果,這樣做在**層面看起來是非常糟糕的,主要有以下幾點原因:

基於以上的思考結果,我重新寫了乙份**,將標題和內容進行分離,這樣樣式寫起來就會非常清晰,而且簡單易維護;這種在頁面上看起來標題和板塊的一致性在js中進行關聯和耦合處理,於是結構就變成了這樣:

"tab"

>

<

!-- 頭部 --

>

="tab_header"

>

="selected"

>公告<

/li>

規則<

/li>

論壇<

/li>

安全<

/li>

公益<

/li>

<

/ul>

<

/div>

<

!-- 內容 --

>

="tab_content"

>

="dom" style=

"display: block;"

>

"#">資料七夕:金牛愛送玫瑰<

/a>

<

/li>

"#"> 阿里打造"網際網路監管"

<

/a>

<

/li>

"#">

10萬家店60萬新品<

/a>

<

/li>

"#">全球最大網上時裝周<

/a>

<

/li>

<

/ul>

<

/div>

="dom"

>

"#">「全額返現」要管控啦<

/a>

<

/li>

"#">

**新規發布彙總

(7月)

<

/a>

<

/li>

"#">炒信規則調整意見反饋<

/a>

<

/li>

"#">全質量相關規則近期變更<

/a>

<

/li>

<

/ul>

<

/div>

<

/div>

<

/div>

標題和內容的數量都是一一對應的,這樣js
中只需要通過乙個迴圈遍歷時的i就可以控制題目和內容的耦合關係,從而控制類名和本身的顯示與否,非常地方便。

總結:今天的第一種思路就是我布置結構的時候想當然的考慮了互動的功能,用結構硬拼互動的方便,結果**寫得多而雜,效能也跟著下降。通過今天這個小案例讓我更加體會到什麼叫做「**功能和結構的分離」,分離並不是真正意義上的互不理睬,相反,分離是為了能更好地協同工作,乙個部分只負責乙個功能,只需要做到極致,其他的放心的交給別的部分來做。像結構就只是結構,互動的內容js可比結構有經驗得多。

對Python shell的一些思考

對python shell的一些思考 就兩次指令碼處理的編碼練習而言,我感覺如果使用python去寫指令碼來處理日常事務的話,相對於shell是一件比較麻煩的事情,因為我可以使用shell在花費更少的時間內,比較熟練地使用awk sed和grep這些常用的命令在非常簡短的指令碼語句內,完成pytho...

對迷茫的一些思考

最近依然迷茫不安,從3月份開始嘗試去找工作,現在已經4月底,依然沒有著落。不是沒有好機會,而是自己能力不足,抓不住機會,於是自己很慌亂,發現不會或不擅長的東西,拼命在補,同時也在後悔為什麼當初沒有好好努力。然後也明白了一些道理。人們總說學習永遠不晚,其實是會晚的,會錯過很多時機,但時機是不會再次到來...

對程式設計的一些思考

1.程式 是程式設計思想的體現 我想程式設計人員在設計程式之初,肯定會有一番思考。思考主要是程式設計的目的,然後是實現目的的方法,最後才是 的實現。所以,程式 是程式設計思想的體現。分析 的啟示 我們分析程式 時,可以在看 之前,想想這個 要幹什麼事,然後再去看 就容易多了。程式設計的啟示 先思考程...