search

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

js之ajax与选项卡换肤实战

月光下，遗忘黑暗
月光下，遗忘黑暗原创
2021年04月11日 16:46:40596浏览

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.         }
  13.         a {
  14.             text-decoration: none;
  15.             color: #555;
  16.         }
  18.         a:hover {
  19.             text-decoration: underline;
  20.             color: red;
  21.         }
  23.         li {
  24.             list-style: none;
  25.             line-height: 1.6em;
  26.         }
  28.         li:hover {
  29.             cursor: default;
  30.         }
  32.         .tabs {
  33.             width: 300px;
  34.             height: 300px;
  35.             margin: 30px;
  36.             background-color: #e6e6e6;
  38.             display: flex;
  39.             flex-direction: column;
  40.         }
  42.         .tab {
  43.             height: 36px;
  44.             display: flex;
  45.         }
  47.         .tab li {
  48.             flex: auto;
  49.             text-align: center;
  50.             line-height: 36px;
  51.             background-color: #fff;
  52.         }
  54.         .tab li.active {
  55.             background-color: #e6e6e6;
  56.         }
  58.         .tab li:hover {
  59.             cursor: pointer;
  60.         }
  62.         /* 默认所有选项卡只有一个显示,其它隐藏 */
  63.         .item {
  64.             padding: 20px;
  65.             display: none;
  66.         }
  68.         .item.active {
  69.             display: block;
  70.         }
  71.     </style>
  72. </head>
  73. <body>
  74.     <div class="tabs">
  75. <!--        导航-->
  76.         <ul class="tab">
  77.             <li data-index="1" class="active">省内</li>
  78.             <li data-index="2">国内</li>
  79.             <li data-index="3">国际</li>
  80.         </ul>
  81. <!--        与导航标签页对应的详情页-->
  82.         <ul data-index="1" class="item active">
  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.         <ul data-index="2" class="item">
  89.             <li><a href="">学党史悟思想办实事开新局</a></li>
  90.             <li><a href="">学党史悟思想办实事开新局</a></li>
  91.             <li><a href="">学党史悟思想办实事开新局</a></li>
  92.             <li><a href="">学党史悟思想办实事开新局</a></li>
  93.         </ul>
  94.         <ul data-index="3" class="item">
  95.             <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  96.             <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  97.             <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  98.             <li><a href="">柬埔寨单日新增新冠确诊病例数创新高</a></li>
  99.         </ul>
  100.     </div>
  101.     <script>
  102.         //事件代理实现导航的切换
  103.         const tap = document.querySelector('.tab');
  104.         const items = document.querySelectorAll('.item');
  105.         tap.onclick = (ev) => {
  106.             // console.log(ev.currentTarget)
  107.             // console.log(ev.target)
  108.             //1. 清空之前的active样式，将当前导航设置为active样式
  109.             // ...转为数组
  111.             //轮询删除class active
  112.             [...tap.children].forEach((item) => item.classList.remove('active'));
  113.             // 点击的元素增加class active
  114.             ev.target.classList.add('active');
  115.             items.forEach((item)=> {
  116.                 item.classList.remove('active');
  118.         });
  119.             //items变为类数组，然后过滤与点击的tap相等的data-index出来，并把它添加class属性active
  120.             [...items].filter((item)=>item.dataset.index===ev.target.dataset.index).pop().classList.add('active');
  121.         }
  122.     </script>
  123. </body>
  124. </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;
  11.         }
  12.         body {
  13.             background-image: url('https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg');
  14.             /*自动填充，以窗口为大小*/
  15.             background-size: cover;
  16.             /*去重复*/
  17.             background-repeat: no-repeat;
  18.         }
  19.         .container {
  20.             display: grid;
  21.             position: absolute;
  22.             right: 0;
  23.             left: 0;
  24.             top: 80px;
  25.             /*水平居中*/
  26.             margin: auto;
  27.             width: 700px;
  28.             grid-template-columns: repeat(3,1fr);
  29.             gap: 10px;
  30.         }
  31.         .container > img {
  32.             opacity: 0.6;
  33.           width: 100%;
  34.             border: 2px solid white;
  35.         }
  36.         .container > img:hover {
  37.             width: 105%;
  38.             opacity: 1;
  39.             cursor : pointer;
  40.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <img src="https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg" alt="">
  47.         <img src="https://pic.netbian.com/uploads/allimg/170609/123945-1496983185ad61.jpg" alt="">
  48.         <img src="https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.jpg" alt="">
  49.         <img src="https://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg" alt="">
  50.         <img src="https://pic.netbian.com/uploads/allimg/210328/001020-1616861420d950.jpg" alt="">
  51.         <img src="https://pic.netbian.com/uploads/allimg/190518/174718-1558172838db13.jpg" alt="">
  52.     </div>
  53.     <script>
  54.         // 事件代理
  55.         document.querySelector('.container').onclick =(ev) =>
  56.             document.body.style.backgroundImage = `url('${ev.target.src}')`;
  59.       /*  const box = document.querySelector('.container');
  60.         box.onclick = function (ev) {
  61.             const body = document.body;
  62.             let urlImg = `url('${ev.target.src}')`;
  63.             body.style.backgroundImage = urlImg;
  64.         }*/
  65.     </script>
  66. </body>
  67. </html>

效果

上一条：Dom元素增加删除,修改,查找下一条：JS第一课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议