css隔行換色

來源:互聯網
上載者:User
我通過一個最簡單的例子來測試,結果發現我還是喜歡用jq來實現,呵呵。雖然很簡單,但是還記下來了,學習的過程,哈哈。。。html檔案:<html>
<head>
  <title>隔行換色</title>
</head>
<body>
 <ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
 </ul>
  </body>
</html> 第一種方法,通過jQuery來實現(別忘記匯入jQuery.js哦):  <script>
    $(document).ready(function(){
  $("li:odd").css("background","#9FB7F6");
  $("li:even").css("background","#B6C8F8");
 });
  </script> 第二種方法,通過css實現<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style> 第三種方法,通過CSS和JS實現(註:此處JS盡量加在ul後面,不要加在<head>裡面。當然也可以用window.onload。)  <style type="text/css">
    .li01{background:#9FB7F6;}
   .li02{background:#B6C8F8;}
  </style> <script language="JavaScript">
 objName=document.getElementsByTagName("li") for (i=0;i<objName.length;i++) {
 (i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02"); }
 </script>
相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。