<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #tab{

            width:300px;

           border:3px solid #ccc;

        }

        #tab .active{

            background: #fff;

        }

        #tab h3{

            margin:0;

            padding:0;

            font-size:14px;

            float:left;

            width:60px;

            height:24px;

        }

        #tab div{

            clear:both;

        }

    </style>

</head>

<body>

<div id="tab">

    <h3 class="active">体育</h3>

    <h3>娱乐</h3>

    <h3>汽车</h3>

    <div class="s">

    </div>

</div>

<script>

var str=[

    {

        "title": "国内Nodejs 2015汇总",

        "href": "/topic/5696e43e6272216e51bff67e"

    },

    {

        "title": "展望Nodejs 2016和新年祝福",

        "href": "/topic/56b70c15c3f170d2629955b5"

    },

    {

        "title": "新的社区推荐客户端：Noder",

        "href": "/topic/572afb6b15c24e592c16e1e6"

    },

    {

        "title": "33333：Noder",

        "href": "/topic/572afb6b15c24e592c16e1e6"

    },

]
window.onload=function(){
    var tab=document.getElementById("tab");
    var h3=document.getElementsByTagName("h3");
    var s=document.getElementsByClassName("s")[0];
    for(var i=0; i<h3.length;i++){ //遍历 html中的标签元素
        h3[i].index=i;   //
        h3[i].onclick=function(){  //在<h3>当中点击 触发  active 然后创建s的元素中内容，加载json中的数据
            $this=this;
            for(var i=0 ;i<h3.length;i++){
                h3[i].className="";
                $this.className="active";
                s.innerHTML=str[$this.index].title;
            }
        }
    }
}
</script> </body> </html>

　　http://jsbin.com/sorisekuhi/edit?html,css,js,console,output

从一个简单的Tab切换开始——与AJAX的结合的更多相关文章

  1. (一)在HTML页面中实现一个简单的Tab

    在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...

  2. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  3. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  4. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  5. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  7. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  8. 在HTML页面中实现一个简单的Tab

    参考:http://blog.sina.com.cn/s/blog_6cccb1630100m23i.html HTML页面代码如下: <!DOCTYPE html PUBLIC "- ...

  9. 自己写的一个简单的Tab类

    //------------- PS_DOM 功能函数 start----------------var PS_DOM ={ indexOf: function(arr, e){ for(var i= ...

随机推荐

  1. Linux安装配置

    虚拟机配置Linux镜像文件 配置网路 防火墙 一.虚拟机配置Linux镜像文件 1.将下载好的Linux镜像文件载入进来 2.启动虚拟机,安装 3.此步为是否检测linux系统,我们选择" ...

  2. 详解mysql数据库的左连接、右连接、内连接的区别

    一般所说的左连接,外连接是指左外连接,右外连接.做个简单的测试你看吧. 先说左外连接和右外连接: SQL>select * from t1; ID NAME ---------- ------- ...

  3. 'is' in Python

    在Python中应该避免将“is”运算符用于比较 像“数值”和“字符串”这种不可变的值.由于Python内部操作这些对象的方式,使得对这些对象使用“is”运算符的结果将是不可预测的. 下面以两个例子加 ...

  4. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  5. Serv-u 外网访问内网的FTP服务器

    1. 背景简介 最近研究如何在内网搭架FTP服务器,同时要保证外网(公网)能访问的到.终成正果,但走了一些弯路,在此记下,以飨后人. 2. 基础知识 FTP 使用 2 个端口,一个数据端口和一个命令端 ...

  6. C语言中auto，register，static，const，volatile的区别

    1)auto 这个关键字用于声明变量的生存期为自动,即将不在任何类.结构.枚举.联合和函数中定义的变量视为全局变量,而在函数中定义的变量视为局部变量.这个关键字不怎么多写,因为所有的变量默认就是aut ...

  7. Python编程-数据库

    1.MySQL 程序: socket客户端 根据IP和端口进行连接 发送指令: xxx 接收结果 socket服务端 运行起来 获取指令(recv) xxx 解析命令 文件夹操作: ... 文件操作: ...

  8. 23种设计模式UML表示形式

    一.概况:       类关系表示:   说明:           二.创建型 1.Factory Method 意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Met ...

  9. 13.常见模块re-正则模块

    1.正则 正则表达式是计算机科学的一个概念,正则表通常被用来检索.替换那些符合某个模式(规则)的文本.也就是说使用正则表达式可以在字符串中匹配出你需要的字符或者字符串,甚至可以替换你不需要的字符或者字 ...

  10. Ubuntu 使用国内apt源

    编辑/etc/apt/source-list deb http://cn.archive.ubuntu.com/ubuntu/ trusty main restricted universe mult ...