主頁 > 知識庫 > HTML&CSS&JS兼容樹(IE,F(xiàn)irefox,chrome)

HTML&CSS&JS兼容樹(IE,F(xiàn)irefox,chrome)

熱門標(biāo)簽:400開頭電話在哪辦理 可以集成到系統(tǒng)的外呼 荊州銷售電銷機(jī)器人 電話外呼系統(tǒng)怎么找準(zhǔn)客戶 中國世界文化遺產(chǎn)地圖標(biāo)注 電腦外呼系統(tǒng)安裝 外呼系統(tǒng)隱私 揚(yáng)州市地圖標(biāo)注 西安公司外呼系統(tǒng)價格
WEB設(shè)計里什么是樹?簡單講,點(diǎn)擊一個鏈接,會展開下級目錄,再點(diǎn)擊會合上,這個就是最簡單的樹,如何去實(shí)現(xiàn)呢,也很簡單,css里有一個屬性display,這個可以控制內(nèi)容的現(xiàn)實(shí)還是不顯示,那么再通過js來控制css的屬性即可實(shí)現(xiàn),看如下代碼:
<div>頂級目錄</div>
<div id="menulist">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
這個就算是樹的原型了,當(dāng)然初始狀態(tài)給他加上css的display屬性,display最常用的是none和block屬性
none即不顯示,而block則象塊類型元素一樣顯示,再看代碼
<div>頂級目錄</div>
<div id="menulist" style="display:none">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
如此一來,運(yùn)行該頁面,則只顯示頂級目錄,如果控制呢,則需要加入js代碼
1.先獲得menulist
var menulist=document.getElementById("menulist");
2.或者該對象后即可控制其CSS屬性
menulist.style.display="block";
加判斷
if (menulist.style.display="none")
menulist.style.display="block";
else
menulist.style.display="none";
這樣最原始的樹就生成了,最終代碼
<script>
function showmenu()
{
var menulist=document.getElementById("menulist");
if (menulist.style.display=="none")
menulist.style.display="block";
else
menulist.style.display="none";
}
</script>
<div on
click="showmenu();">頂級目錄</div>
<div id="menulist" style="display:none">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
曾經(jīng)在很長一段時間里,我都按照該方法來制作屬性目錄,不管要制作的目錄有多復(fù)雜,該方法屢試不爽,以下截圖是我做的比較復(fù)雜的樹形目錄在IE下的運(yùn)行效果:
 
 
可怕的事情發(fā)生在chrome下看全亂了,經(jīng)過一番信息檢索,終于找到原因,display除了block和none外,尚有很多其他屬性,block是以塊狀顯示,我那上面是以表格來布局的,天知道table和block是不是有深仇大恨,微軟自以為聰明地?zé)o視了他們的仇恨,而chrome還是很老實(shí)地遵守標(biāo)準(zhǔn),firefox也是一樣,所以在他們的解釋里還是有問題的,那怎么解決這個問題:
display還有一個屬性table-cell,即以table的形式來渲染內(nèi)容,這個正好符合我使用table來布局的情況,以下為三個瀏覽器的兼容效果圖:
 
IE6
 
chrome2
 
firefox3.5

標(biāo)簽:延安 四川 白銀 貴陽 錫林郭勒盟 阿拉善盟 濟(jì)南 樂山

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