亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

WEB前端 -- 實(shí)例

來(lái)源：風(fēng)中的妖嬈落葉 發(fā)布時(shí)間：2018-11-22 14:50:50 閱讀量：1238

1.隔行變色

<script>/*$('#table tr:even').css('background','#abcdef');$('#table tr:odd').css('background','yellow');*/$('#table tr').filter(':even').css('background','#abcdef').end().filter(':odd').css('background','yellow');</script>

2.tab標(biāo)簽頁(yè)效果

  1. <style>
  2. #content div{
  3. width:300px;
  4. height:200px;
  5. border:1px solid #abcdef;
  6. display:none;
  7. }
  8. #content div.show{
  9. display:block;
  10. }
  11. </style>
  12. <body>
  13. <ul id='ul' style='padding:0 15px;border:1px solid #abcdef;float:left;margin-right:3px;'>
  14. <li class="current">php</li>
  15. <li>ruby</li>
  16. <li>java</li>
  17. </ul>
  18. <div id="content">
  19. <div class="show">php......介紹</div>
  20. <div>ruby......介紹</div>
  21. <div>java......介紹</div>
  22. </div>
  23. </body>
  24. <script>
  25. var ul = document.getElementById('ul');
  26. var li = document.getElementByTagName('li');
  27. var content = document.getElementById('content');
  28. var div = content.getElementByTagName('div');
  29. for(var i = 0; i < li.length; i++){
  30. li[i].index = i;
  31. li[i].onclick = function(){
  32. for(var i = 0; i < li.length; i++){
  33. li[i].className = '';
  34. div[i].style.display='none';
  35. };
  36. this.className = 'current';
  37. div[this.index].style.display='block';
  38. }
  39. };
  40. </script>
  41. //JQuery的寫(xiě)法
  42. <script>
  43. $('#ul li').click(function(){
  44. //1/點(diǎn)擊li時(shí)要切換樣式
  45. //$(this).addClass('current').siblings().removeClass('current');
  46. //2.根據(jù)li的索引值來(lái)確定哪個(gè)div顯示，其他div隱藏
  47. $('#content>div').eq($(this).index()).show().siblings().hide();
  49. $(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
  50. });
  51. </script>


標(biāo)簽： PHP
分享：
評(píng)論：
你還沒(méi)有登錄，請(qǐng)先

熱門文章

    推薦文章