PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > js之ajax与选项卡换肤实战

js之ajax与选项卡换肤实战

月光下,遗忘黑暗
月光下,遗忘黑暗 原创
2021年04月11日 16:46:40 573浏览

1.ajax演示

代码块
html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CROS-POST</title>
  6. </head>
  7. <body>
  8. <button>跨域请求CROS-POST</button>
  9. <p class="tips"></p>
  10. <script>
  11. const btn = document.querySelector('button');
  12. const tips = document.querySelector('p');
  13. btn.onclick = (ev) =>{
  14. // 1.xhr对象
  15. const xhr = new XMLHttpRequest();
  16. // 2.配置xhr
  17. xhr.open('post','http://www.a.com/cors1.php');
  18. // 3.处理xhr响应
  19. xhr.onload = () => tips.innerHTML = xhr.response;
  20. // 4.发送xhr请求
  21. // 模拟表单数据 FormData
  22. let formData = new FormData();
  23. formData.append('email','admin@qq.com');
  24. formData.append('password','123456');
  25. xhr.send(formData);
  26. }
  27. </script>
  28. </body>
  29. </html>

php

  1. <?php
  2. header('Access-Control-Allow-Origin:*');
  3. print_r($_POST);

效果

2. 选项卡

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选项卡</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. box-sizing: border-box;
  11. }
  12. a {
  13. text-decoration: none;
  14. color: #555;
  15. }
  16. a:hover {
  17. text-decoration: underline;
  18. color: red;
  19. }
  20. li {
  21. list-style: none;
  22. line-height: 1.6em;
  23. }
  24. li:hover {
  25. cursor: default;
  26. }
  27. .tabs {
  28. width: 300px;
  29. height: 300px;
  30. margin: 30px;
  31. background-color: #e6e6e6;
  32. display: flex;
  33. flex-direction: column;
  34. }
  35. .tab {
  36. height: 36px;
  37. display: flex;
  38. }
  39. .tab li {
  40. flex: auto;
  41. text-align: center;
  42. line-height: 36px;
  43. background-color: #fff;
  44. }
  45. .tab li.active {
  46. background-color: #e6e6e6;
  47. }
  48. .tab li:hover {
  49. cursor: pointer;
  50. }
  51. /* 默认所有选项卡只有一个显示,其它隐藏 */
  52. .item {
  53. padding: 20px;
  54. display: none;
  55. }
  56. .item.active {
  57. display: block;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="tabs">
  63. <!-- 导航-->
  64. <ul class="tab">
  65. <li data-index="1" class="active">省内</li>
  66. <li data-index="2">国内</li>
  67. <li data-index="3">国际</li>
  68. </ul>
  69. <!-- 与导航标签页对应的详情页-->
  70. <ul data-index="1" class="item active">
  71. <li><a href="">坚持房住不炒,深圳态度坚决打击炒房团</a></li>
  72. <li><a href="">坚持房住不炒,深圳态度坚决打击炒房团</a></li>
  73. <li><a href="">坚持房住不炒,深圳态度坚决打击炒房团</a></li>
  74. <li><a href="">坚持房住不炒,深圳态度坚决打击炒房团</a></li>
  75. </ul>
  76. <ul data-index="2" class="item">
  77. <li><a href="">学党史悟思想办实事开新局</a></li>
  78. <li><a href="">学党史悟思想办实事开新局</a></li>
  79. <li><a href="">学党史悟思想办实事开新局</a></li>
  80. <li><a href="">学党史悟思想办实事开新局</a></li>
  81. </ul>
  82. <ul data-index="3" class="item">
  83. <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  84. <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  85. <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  86. <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  87. </ul>
  88. </div>
  89. <script>
  90. //事件代理实现导航的切换
  91. const tap = document.querySelector('.tab');
  92. const items = document.querySelectorAll('.item');
  93. tap.onclick = (ev) => {
  94. // console.log(ev.currentTarget)
  95. // console.log(ev.target)
  96. //1. 清空之前的active样式,将当前导航设置为active样式
  97. // ...转为数组
  98. //轮询删除class active
  99. [...tap.children].forEach((item) => item.classList.remove('active'));
  100. // 点击的元素增加class active
  101. ev.target.classList.add('active');
  102. items.forEach((item)=> {
  103. item.classList.remove('active');
  104. });
  105. //items变为类数组,然后过滤与点击的tap相等的data-index出来,并把它添加class属性active
  106. [...items].filter((item)=>item.dataset.index===ev.target.dataset.index).pop().classList.add('active');
  107. }
  108. </script>
  109. </body>
  110. </html>

效果

3.换肤

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>一键换肤</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. body {
  12. background-image: url('https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg');
  13. /*自动填充,以窗口为大小*/
  14. background-size: cover;
  15. /*去重复*/
  16. background-repeat: no-repeat;
  17. }
  18. .container {
  19. display: grid;
  20. position: absolute;
  21. right: 0;
  22. left: 0;
  23. top: 80px;
  24. /*水平居中*/
  25. margin: auto;
  26. width: 700px;
  27. grid-template-columns: repeat(3,1fr);
  28. gap: 10px;
  29. }
  30. .container > img {
  31. opacity: 0.6;
  32. width: 100%;
  33. border: 2px solid white;
  34. }
  35. .container > img:hover {
  36. width: 105%;
  37. opacity: 1;
  38. cursor : pointer;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div class="container">
  44. <img src="https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg" alt="">
  45. <img src="https://pic.netbian.com/uploads/allimg/170609/123945-1496983185ad61.jpg" alt="">
  46. <img src="https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg" alt="">
  47. <img src="https://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg" alt="">
  48. <img src="https://pic.netbian.com/uploads/allimg/210328/001020-1616861420d950.jpg" alt="">
  49. <img src="https://pic.netbian.com/uploads/allimg/190518/174718-1558172838db13.jpg" alt="">
  50. </div>
  51. <script>
  52. // 事件代理
  53. document.querySelector('.container').onclick =(ev) =>
  54. document.body.style.backgroundImage = `url('${ev.target.src}')`;
  55. /* const box = document.querySelector('.container');
  56. box.onclick = function (ev) {
  57. const body = document.body;
  58. let urlImg = `url('${ev.target.src}')`;
  59. body.style.backgroundImage = urlImg;
  60. }*/
  61. </script>
  62. </body>
  63. </html>

效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议