In this paper, the method of realizing the js+css of Li List is described. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>css+js realizes Li list interlace color effect </title>
<style>
. mytable {border-collapse:collapse;border:solid #6AA70B; border-width:0px 0 0 0px;width:50%;}
. mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url (/images/20110704/new_dot.gif) 3px 50 % No-repeat;border-bottom: #6AA70B 1px dotted; font-family: "Verdana, XXFarEastFont-Arial"; Font-size:12px;color: #008000; text-align: left;height:25px;}
. mytable ul li.t1 {background-color: #EFFEDD;}
. mytable ul Li.t2{background-color: #ffffff;}
. mytable ul li.t3 {background-color: #D2FCA0;}
</style>
<body style=margin:0;><br><br><br>
<div align= "center" >
<div class=mytable id=tab>
<ul>
<li>
<a title= "JavaScript to achieve text and picture drag effect method" target= "_blank" href= "http://www.jb51.net/article/61182.htm" >
JavaScript to achieve text and picture dragging effect of the method </a></li>
<li>
<a title= "jquery to achieve click on the page to display the effect of the image" target= "_blank" href= "http://www.jb51.net/article/61181.htm" >
jquery realization clicks the picture page to display the effect the method </a></li>
<li>
<a title= "PHP implementation recursive and Infinite classification method" target= "_blank" href= "http://www.jb51.net/article/61180.htm" >
The method of recursive and infinite classification in PHP </a></li>
<li>
<a title= "The way PHP implements the doubling of each cell value (number) in a multidimensional array" target= "_blank" href= "http://www.jb51.net/article/61179.htm" >
How to double each cell value (number) in a multidimensional array in PHP </a></li>
<li>
<a title= "A common function instance analysis of adding and deleting elements of PHP array" target= "_blank" href= "http://www.jb51.net/article/61178.htm" >
A common function example analysis of adding and deleting elements of PHP array </a></li>
<li>
<a title= "JS+CSS implementation drag pop-up Prompt box" target= "_blank" href= "http://www.jb51.net/article/61177.htm" >
Js+css to implement a drag pop-up balloon </a></li>
<li>
<a title= "JS implementation dropdown box Select the method to display the picture" target= "_blank" href= "http://www.jb51.net/article/61176.htm" >
JS Implementation dropdown Box Select the method to display the picture </a></li>
<li>
<a title= "JS implementation click picture Copy the picture address to the Pasteboard method" target= "_blank" href= "http://www.jb51.net/article/61175.htm" >
JS implementation Click on the picture to copy the picture address to the Pasteboard method </a></li>
</ul></div><script type= "Text/javascript" >
<!--
var Ptr=document.getelementbyid ("tab"). getElementsByTagName ("Li");
function $ () {
for (i=1;i<ptr.length+1;i++) {
Ptr[i-1].classname = (i%2>0)? " T1 ":" T2 ";
}
}
window.onload=$;
for (Var i=0;i<ptr.length;i++) {
Ptr[i].onmouseover=function () {
This.tmpclass=this.classname;
This.classname = "T3";
};
Ptr[i].onmouseout=function () {
This.classname=this.tmpclass;
};
}
-->
</script>
</body>
I hope this article will help you with your JavaScript programming.
