WEB前端 -- 实例

来源：风中的妖娆落叶 发布时间：2018-11-22 14:50:50 阅读量：1053

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标签页效果

  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的写法
  42. <script>
  43. $('#ul li').click(function(){
  44. //1/点击li时要切换样式
  45. //$(this).addClass('current').siblings().removeClass('current');
  46. //2.根据li的索引值来确定哪个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>


标签： PHP
分享：
评论：
你还没有登录，请先

热门标签

热门文章

    推荐文章