标签:style blog http java color os
html 部分代码:
1 <div id="list"> 2 <UL> 3 <LI id=c1 class=current> 4 <A href="javascript:openurl2(‘c1‘, ‘/View/menu‘, ‘/undefined‘)">查看</A> 5 </LI> 6 <LI id=c2><A href="javascript:openurl2(‘c2‘, ‘/Manage/menu‘, ‘/undefined‘)">管理</A></LI> 7 <LI id=c3><A href="javascript:openurl2(‘c3‘, ‘/Maintain/menu‘, ‘/undefined‘)">维护</A></LI> 8 </UL> 9 </div>
其中包括JS代码如下:
1 var currentid = "c1"; 2 function openurl2(newid, url1, url2) 3 { 4 document.getElementById(currentid).className = ""; 5 document.getElementById(newid).className = "current"; 6 currentid = newid; 7 8 window.parent.document.getElementById("menu").src = url1; 9 window.parent.document.getElementById("content").src = url2; 10 }
CSS部分代码:
1 #list li { 2 float:left; 3 background:url("/img/menu_1.gif") no-repeat bottom left; 4 padding:37px 0 0 0; 5 height:29px; 6 } 7 8 #list a { 9 float:left; 10 margin-right:1px; 11 display:block; 12 padding:8px 18px 1px 18px; 13 color:#424239; 14 font-weight:bold; 15 font-size:13px; 16 } 17 18 #list a:hover { 19 text-decoration:none; 20 color:#0000ff; 21 } 22 23 #list .current { 24 background:url("/img/menu_2.gif") no-repeat bottom; 25 color:#FFFFFF; 26 } 27 #list .current a {color:#FFFFFF;} 28 #list .current a:hover{color:#ffffff}
说明如下:
JS代码的主要功能是:在“查看”、“管理”、“维护”三个选项,当选中其中某个项时,就将该项的className设置为"current"
这时就会使得CSS中的设置的list .current属性覆盖原来的list li属性。
(一)
通过浏览器 F12 调试,“查看”选项的属性如下:
标签:style blog http java color os
原文地址:http://www.cnblogs.com/fendou-999/p/3833488.html