0515-选项卡ajax - ajax

Home > List of blog posts > 0515-选项卡ajax
Blogger Information
Blog 61
fans 1
comment 0
visits 69739
Special Recommendation
More>
Related recommendations
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用异步请求获取（仿PHP中文网选项卡）</title>
    <style>
        h2 {
            text-align: center;
        }
        .box {
            width: 538px;
            height: 500px;
            background-color: white;
            border: 1px solid #ccc;
            margin: 20px auto;
            color: #363636;
        }
        .box > ul {
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            /*border-bottom: 1px solid #ccc;*/
            overflow: hidden;
        }
        .box > ul li {
            list-style-type: none;
            width: 90px;
            height:36px;
            float:left;

            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;


            text-align: center;
            line-height: 36px;
        }
        .box ul + span {
            float:right;
            width:90px;
            height: 36px;
            line-height: 36px;
            margin-top: -36px;
        }
        .box ul + span >a {
            color: #696969;
            text-decoration: none;
        }

        .box li.active {
            background-color: #fff;
            font-weight: bolder;
            border-bottom: none;

            border-top: 3px solid orangered;
        }

        .box div {
            display: none;
        }

        .box div ul {
            margin: 0;
            padding: 10px;

            list-style-type: none;
        }

        .box div ul li {
            line-height: 1.5em;
            /*background-color: yellow;*/
        }

        .box div ul li a {
            color: #636363;
            text-decoration: none;
        }
        .box div ul li a:hover {
            color: #000;
        }

        .box div ul li  span {
            float: right;
            color: red;

        }

    </style>
</head>
<body>
<!-- 掌握循环操作 -->
<h2>用异步请求获取（仿PHP中文网选项卡）</h2>
<div class="box">

    <ul>
        <!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
        <li class="active">大放厥词</li>
        <li>PHP中文网</li>
        <li>洗心革面</li>
        <li>重新做人</li>
    </ul>
    <span><a href="">更多下载>></a></span>

    <!-- 其实你在页面中看到列表,其实都已经在页面中了,只是隐藏了起来,实际开发过程,大多是通过Ajax请求来动态获取 -->
    <div style="display: block;">

<!--        <ul>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!--        </ul>-->

    </div>

    <div>

<!--        <ul>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--            <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!--        </ul>-->

    </div>

    <div>

<!--        <ul>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--            <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!--        </ul>-->

    </div>
    <div>

<!--        <ul>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--            <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!--        </ul>-->

    </div>
</div>
<script>
    // 1、获取需要的元素
      var box = document.getElementsByClassName('box')[0];
      var ul = box.getElementsByTagName('ul')[0];
      var tab = ul.getElementsByTagName('li');
      var div = box.getElementsByTagName('div');

      for(var i=0;i<tab.length;i++){
          //这个里是 li,每个按钮
         tab[i].index=i;   //关键的一步，将tab[i]和循环I绑定,为当前的选项卡添加自定义属性index:当前对象的编号.
                            //靠这个i 来做到绑定 i 、按钮标签、DIV内容。
          tab[i].addEventListener('click',danji,false)


      }

      function danji() {
          for (var n = 0; n < tab.length; n++) {
              //按钮的样式全部清空。
              tab[n].className = '';
              //每个div显示为隐藏。
              div[n].style.display = 'none';
          }

          //设置用户当前操作的选项卡添加样式，为高亮显示，
          this.classList.add('active');

          //点击的DIV的设置为可见,this.index=tab[i]
          div[this.index].style.display = 'block';  //div和li索引公用，绑定


          // 1、创建对象。
          var num = this.index;

          var re = new XMLHttpRequest();

          re.onreadystatechange = function () {
              if (re.readyState === 4) {
                    //console.log(re.responseText);

                    //给DIV传值
                  div[num].innerHTML = re.responseText;
              }
          };

              re.open('get', 'admin/data.php?p=' +num, false);
              re.send(null);

     }


    //由于首页面开始没有数据，做一个机器人帮点击第0个标签按钮。
    var firsttab=ul.firstElementChild;
      firsttab.addEventListener('click',input,false);

     //创建一个envet点击事件
      var event=new Event('click');
      //把点击事件派发给 firsttab,让他自己点击。
      firsttab.dispatchEvent(event);

   //复制以上的ajax代码，改DIV索引为0。
      function input() {
            var re = new XMLHttpRequest();

            re.onreadystatechange = function () {
                if (re.readyState === 4) {
                    //console.log(re.responseText);

                    //给DIV传值
                    div[0].innerHTML = re.responseText;
                }
            };

            re.open('get', 'admin/data.php?p=' +0, false);
            re.send(null);

        }


</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
VSCODE中SETTINOS.JSON配置

2019-11-27 10:58:34