主頁 > 知識(shí)庫 > CSS制作樹狀目錄教程

CSS制作樹狀目錄教程

熱門標(biāo)簽:沸思外呼線路 南通電話外呼系統(tǒng)開發(fā) 南寧外呼電銷系統(tǒng)招商 北京銷售外呼系統(tǒng)線路 400電話辦理安徽 電銷智能機(jī)器人靠譜么 電銷機(jī)器人的宣傳語 石家莊電話機(jī)器人電話 江西防封卡外呼系統(tǒng)怎么安裝
本篇詳細(xì)介紹如何利用CSS能方便地控制對(duì)象的“顯示”和“隱藏”屬性原理,制作一個(gè)樹狀目錄,用CSS制作這樣的樹狀目錄,方法簡(jiǎn)單,代碼也比較少,所以把它寫出來,給網(wǎng)友們共亨,以便在需要的時(shí)候也可動(dòng)手做一個(gè)。

     索易電子雜志大多采用樹狀目錄,當(dāng)鼠標(biāo)點(diǎn)擊主目錄時(shí),展開子目錄;當(dāng)再次點(diǎn)擊主目錄時(shí),則關(guān)閉子目錄。顯得簡(jiǎn)捷明快,樸實(shí)無華。

     制作這種樹狀目錄的方法較多,最近我先看下面的示例:當(dāng)用鼠標(biāo)在主目錄上點(diǎn)一下,就下拉出相應(yīng)的子目錄,再點(diǎn)一下,又恢復(fù)原狀,其效果與索易電子雜志上的目錄效果完全一致。


   制作方法:
   我先把產(chǎn)生這種效果的代碼復(fù)制如下,然后結(jié)合代碼講制作方法:
〈div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ 主目錄1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- 子目錄1〈/a〉 〈br〉
〈a href="#"〉- 子目錄2〈/a〉 〈br〉
〈a href="#"〉- 子目錄3〈/a〉 〈br〉
〈a href="#"〉- 子目錄4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display ==''none'')?'''':''none''" 〉
+ 主目錄2 〈/div〉
〈div id="child2" style="display:none"〉
〈a href="#"〉- 子目錄1〈/a〉 〈br〉
〈a href="#"〉- 子目錄2〈/a〉 〈br〉
〈a href="#"〉- 子目錄3〈/a〉
〈/div〉
   注:“ ”表示一個(gè)字符空格
   1、先定義兩個(gè)DIV,一個(gè)用于主目錄,取名為:main1;另一個(gè)用于相應(yīng)的子目錄,取名為:child1?! ?、在main1的DIV中寫上“+ 主目錄1”,并在它的上面加載一個(gè)鼠標(biāo)單擊事件:onclick 和一小段Javascript程序:document.all.child1.style.display= (document.all.child1.style.display ==''none'')?'''':''none''。這段程序的作用是,當(dāng)鼠標(biāo)在main1的DIV上(也就是在“+ 主目錄1”上)單擊時(shí),如果child1的DIV是隱藏的,讓它顯示;若是顯示的,則讓它隱藏。
   3、在child1的DIV上寫上子目錄,并 把它設(shè)置成超級(jí)鏈接,我在上面的示例中是設(shè)置了空鏈接,實(shí)際制作時(shí)把它改為實(shí)鏈接,以讓它指向鏈接目標(biāo)。在child1的DIV定義中加上一個(gè)CSS: style="display:none",其目的是使子目錄開始時(shí)處于隱藏狀態(tài)。
   其它目錄的制作只是重復(fù)上面的三步而已。按F12就可看到 效果了。這種方法主要是利用了CSS的顯示屬性:display,它有一個(gè)特點(diǎn)就是當(dāng)對(duì)象被隱藏后,對(duì)象所占據(jù)的頁面空間將自動(dòng)讓出。我們知道CSS還一 個(gè)屬性:visibility也具有顯示和隱藏的對(duì)象的功能,但不能用來制作上面的樹狀目錄。因?yàn)閂isibility在隱藏對(duì)象后,對(duì)象所占據(jù)的空間并 不釋放,也就是當(dāng)隱藏子目錄時(shí),子目錄的位置只是一片空白而已位置并沒有讓出來,因此另一個(gè)主目錄也就無法靠攏。所以它只能用于那些需要固定頁面元素位置 的地方。

標(biāo)簽:鹽城 晉中 云南 陽泉 來賓 北海 寧夏 衢州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS制作樹狀目錄教程》,本文關(guān)鍵詞  CSS,制作,樹狀,目錄,教程,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS制作樹狀目錄教程》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS制作樹狀目錄教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章