0515-选项卡ajax - ajax - php中文网博客

首页 > 博客列表 > 0515-选项卡ajax
博主信息
博文 61
粉丝 1
访问量 82617
专题推荐
更多>
实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
批改状态：未批改

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
VSCODE中SETTINOS.JSON配置

2019-11-27 10:58:34