当前位置：首页 -> 网页设计 -> HTML/CSS -> 巧用CSS制作树状目录

巧用CSS制作树状目录

时间： 2021-07-31 作者：daque

索易电子期刊大多沿用树状目次，当鼠圈点击主目次时，打开子目次；当再次点击主目次时，则封闭子目次。显得简略明快，华而不实。创造这种树状目次的本领较多，迩来我运用css能简单地遏制东西的“显示”和“湮没”属性道理，也创造一个，我感触用css创造如许的树状目次，本领大略，代码也比拟少，以是把它写出来，给网友们共亨，再不在须要的功夫也可发端做一个。先看底下的示例：当用鼠标在主目次上点一下，就下拉出相映的子目次，再点一下，又恢恢复状，其功效与索易电子期刊上的目次功效实足普遍。创造本领：　　我先把爆发这种功效的代码复制如次，而后贯串代码讲创造本领：〈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〉　　注：“ ”表白一个字符空格　　1、先设置两个div，一个用来主目次，取名为：main1；另一个用来相映的子目次，取名为：child1。　　2、在main1的div中写上 “+ 主目次1”，并在它的上头加载一个鼠标单击事变：onclick 和第一小学段javascript步调：document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'。这段步调的效率是，当鼠标在main1的div上（也即是在“+ 主目次1”上）单击时，即使child1的div是湮没的，让它表露；假如表露的，则让它湮没。　　3、在child1的div上写上子目次，并把它树立成超等链接，我在上头的示例中是树立了空链接，本质创造时把它改为实链接，以让它指向链接目的。在child1的div设置中加上一个css：style="display:none"，其手段是使子目次发端时居于湮没状况。　　其它目次的创造不过反复上头的三步罢了。按f12就可看到功效了。这种本领主假如运用了css的表露属性：display，它有一个特性即是当东西被湮没后，东西所吞噬的页面空间将机动让开。咱们领会css还一个属性：visibility也具备表露和湮没的东西的功效，但不许用来创造上头的树状目次。由于visibility在湮没东西后，东西所吞噬的空间并不开释，也即是当湮没子目次时，子目次的场所不过一片空缺罢了场所并没有让开来，所以另一个主目次也就没辙逼近。以是它只能用来那些须要恒定页面元素场所的场合。

巧用CSS制作树状目录

相关推荐

推荐下载

热门阅览

最新排行