《
CSS在交互上的应用》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333122013.htm
对于css利用。以前始终以为css就是做布局款式，只能表示页面，跟交互是不要紧的。事实上也基础不会往那边想。
2、点击菜单项，相应的子菜单列表显示。
以下用一个简略的例子来论述我想说的。
一个月前的话，做法大略是这样：在#nav > ul上直接增加事件，在事件中判定目的对象是否h3对象。假如是则取得下一个兄弟节点，并依据其显示状况来修正display属性。
代码大抵如下：（以下所有代码仅用于表白逻辑，请不要纠结于是否可履行。）
前段时光做了一个需要，在代码中看到另外的一种思路——这才是我在这里要说的——应用CSS来实现交互。
1 #nav li.menu ul { 2 display:block; 3 }
这时候第二个办法需要在根据h3的background属性来修改值，而第三种只要要添加一条样式：#nav li.menu h3{background:url(...)}即可了。
如果一个页面存在别的样式表影响了你的样式，就会有个优先权的问题。咱们都晓得id，class跟tag的优先级别，然而对一个抒发式，它的优先权是怎么盘算的呢？
JS代码大体如下：
半年前的我的做法会是这样：取得#nav中的h3元素，轮回在其上增添事件。事件判断其下一个兄弟节点是否隐蔽，根据状态修改子菜单ul元素的display属性。
仍然是代码：
代码大致如下：
01 var el = document.getElementById("nav"); 02 el.addEventListener("click", function(e) { 03 var target = e.target.parentNode; 04 if(target.tagName == "LI") { 05 if(target.className == "") 06 target.className = "menu"; 07 }else { 08 target.className = ""; 09 } 10 } 11 }, false),
CSS在IE6,IE7,FIREFOX中的区别;
Tag：交互 交互
01 <div id="nav"> 02 <ul class=""> 03 ,
CSS圆角背景与三角形实现办法; <li> 04 ,
CSS图片层叠实现古画效果; <h3>菜单1</h3> 05 <ul> 06 <li>子菜单1</li> 07 ,
css命名规则：图片切图转网页的代码规范; <li>子菜单2</li> 08 <li>子菜单3</li> 09 <li>子菜单4</li> 10 </ul> 11 </li> 12 ,
CSS命名的三种规范化命名规则; <li> 13 ,
CSS加载失败原因的总结与分析; <h3>菜单2</h3> 14 ,
CSS制作网页的一些经验分享;<ul> 15 <li>子菜单1</li> 16 ,
CSS制作网页时清除网页浮动的作用; <li>子菜单2</li> 17 <li>子菜单3</li> 18 <li>子菜单4</li> 19 <li>子菜单4</li> 20 </ul> 21 </li> 22 </ul> 23 </div>,
css制作漂亮的新闻列表;
效果如下：
PS：
其余的就没什么好说了。大家都有本人的断定，孰优孰劣心里自有评断。
01 var container = document.getElementById("nav"); 02 container.addEventListener("click", function(e) { 03 var target = e.target, list; 04 if(target.tagName == "H3") { 05 list = target.nextSibling; 06 if(list.style.display === "none") 07 list.style.display = "block"; 08 else 09 list.style.display = "none"; 10 } 11 }, false);
须要的后果是：
1 #nav li ul { 2 display:none; 3 }
3、再点击， 子菜单暗藏。
CSS代码：
1、初始时，所有的子菜单都是隐藏的。
--> [
网站建设之]CSS在交互上的运用
01 var els = [...]; //代码获得h3元素数组。 02 for(var i=0; i < els.length; i++) { 03 els[i].addEventListener("click",function() { 04 var target = this.nextSibling; 05 if(target.style.display == "none") 06 target.style.display = "block"; 07 else 08 target.style.display = "none" 09 }, false); 10 }
CSS代码：
两种做法，孰优孰劣请自行判断。
HTML代码：
看看代码，貌似第三种方式跟第二种差未几嘛,CSS制作星级评价的功能。
恩~~，如果点击h3元素不止是修改下一个ul元素的显示状态，比方还要修改h3的背景图案呢？
但机动应用CSS会有给人面前一亮的感到！
(责任编辑：网站建设)
CSS在交互上的应用相关文章