<!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. （4.6）sql server索引缺失提示

    SQLSERVER如何查看索引缺失 sql server索引缺失提示 当大家发现数据库查询性能很慢的时候,大家都会想到加索引来优化数据库查询性能, 但是面对一个复杂的SQL语句,找到一个优化的索引组合 ...

  2. python之数据的序列化

    参考博客:http://www.cnblogs.com/yyds/p/6563608.html 数据的序列化功能表 json.dumps() 将python数据类型转换为(json)字符串 json. ...

  3. OJ 1101 谁是中间的那个

    前言:主要考察排序用法 sort(cow+1,cow+1+n,cmp);//数组按cmp方法排序 Description 一天,农夫乔伊像往常一样来到了他的牧场,他突然对他的奶牛产奶量产生了兴趣.他想 ...

  4. iOS 系统认知 debug distribution release 和 #ifdef DEBUG

    debug:调试模式 有调试信息 线下 release: 无调试信息 经过了编译优化 发布 给用户使用的 线上模式  一般 工程项目 都是自带 上述两种配置结构 还有出现 distribution: ...

  5. Github结合Eclipse出现的问题

    半年前因为学习Git花费了很长时间,半年过去了,因为不使用,基本全部忘记了,最近在公司需要使用Eclipse开发相关项目,用到前期的测试数据挖掘的小算法,又重拾Git,不过这次不再是命令行模式,而是结 ...

  6. mongodb简介和特性

    1.mongodb是基于文档的(BSON,类似json的键值对来存储),不是基于表格,易于水平扩展,将内部相关的数据放在一起能提高数据库的操作性能.如果你想新建一个新的文档类型,不用事先告诉数据库关于 ...

  7. UnsatisfiedLinkError X.so is 64-bit instead of 32-bit之Android 64 bit SO加载机制

    http://blog.csdn.net/canney_chen/article/details/50633982 今天用户反馈应用闪退崩溃了.然后找呀找… 过程原来是这样的: 还是说下项目背景 应用 ...

  8. lelel-5

    一.样式有几种引入方式?link和@import有什么区别? 样式有3种引入方式: 外部样式(外联式Linking):是将网页链接到外部样式表<link rel="stylesheet ...

  9. Linux进程中TIME_OUT解析

    TIMEWAIT状态本身和应用层的客户端或者服务器是没有关系的.仅仅是主动关闭的一方,在使用FIN|ACK|FIN|ACK四分组正常关闭TCP连接的时候会出现这个TIMEWAIT.服务器在处理客户端请 ...

  10. poj 2186 Popular Cows 【强连通分量Tarjan算法 + 树问题】

    题目地址:http://poj.org/problem?id=2186 Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Sub ...