Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax制作仿php中文网选项卡
Blogger Information
Blog 38
fans 1
comment 0
visits 24312
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Ajax制作仿php中文网选项卡
鲨鱼辣椒的博客
Original
528 people have browsed it

Ajax制作仿php中文网选项卡

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
<body>
<!-- 掌握循环操作 -->
<h2>仿PHP中文网选项卡</h2>
<div class="box">

    <ul>
        <!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
        <li class="active">技术文章</li>
        <li>网站源码</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>
    var box = document.getElementsByClassName('box')[0];
    var ul = box.getElementsByTagName('ul')[0];
    var tab = ul.getElementsByTagName('li');
    var list = box.getElementsByTagName('div');
    // alert(tab.length);

    for (var i=0; i<tab.length; i++) {
        tab[i].index = i;
        tab[i].addEventListener('click', getData, false);
    }

    // 事件对应的函数
    function getData() {
        for (var i=0; i<tab.length; i++) {

            //第一步: 将除了当前选项卡之外的所有标签样式全部清空
            tab[i].className = '';

            //第二步: 将除了当前信息列表之外的列表全部隐藏
            list[i].style.display = 'none';
        }
        //设置用户当前操作的选项卡为高亮显示
        this.classList.add('active');
        list[this.index].style.display = 'block';
    }
</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