交替顏色列表實現

技術小胖子發表於2017-11-14
現代瀏覽器通過CSS3方式，而ie6採用jquery實現:
 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”    

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=gbk” /> 
<title>交替顏色列表的實現</title> 
<style type=”text/css”> 

ul 

{ 

  margin:0; 

  padding:0; 

  list-style-type:none; 

} 

#ulist 

{ 

  font-size:14px; 

  line-height:1.5em; 

  border-top:3px solid #119DBB; 

  width:15em; 

  margin:0 auto; 

} 

#ulist li 

{ 

  background-color:#C9F1FA; 

  cursor:pointer; 

  padding-left:10px; 

} 

#ulist li:nth-child(odd) 

{ 

  background-color:#FFF; 

  border-top:1px dotted #14ADCD; 

  border-bottom:1px dotted #14ADCD; 

} 
</style> 
<!–[if IE 6]>    
<script type=”text/javascript” src=”jquery.js”></script> 
<script type=”text/javascript”> 

$(document).ready(function(){ 

  $(`#ulist li:nth-child(odd)`).css(`background-color`,`#fff`); 

}); 
</script> 
<![endif]–> 
</head> 

<body> 

  <ul id=”ulist”> 

    <li>這是一段測試用的文字</li> 

    <li>這是一段測試用的文字</li> 

    <li>這是一段測試用的文字</li> 

    <li>這是一段測試用的文字</li> 

    <li>這是一段測試用的文字</li> 

    <li>這是一段測試用的文字</li> 

  </ul> 
</body> 
</html>




 本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/143597，如需轉載請自行聯絡原作者


相關文章