<!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. 0402-服务注册与发现-Eureka Server使用、将服务注册到Eureka server上

    一.Eureka Server使用 官方文档地址:http://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud. ...

  2. Zookeeper配置说明

    转载自:https://my.oschina.net/u/2338362/blog/399361 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进 ...

  3. django目录下的路由系统和视图函数

    一.Django路由系统(url) 1.什么是路由系统 路由系统的本质是URL模式以及要为该URL模式调用的视图函数之间的一个映射表即不同的url路径对应的不同的函数,该路由系统是存放在全局配置文件u ...

  4. python删除列表中所有的空元素

    while '' in list: list.remove('')

  5. 在html中插入音频

    在html中插入音频 第一种:在页面代码中的<head></head>之间加入<bgsound src="音乐url" loop="-1&q ...

  6. iOS 单例模式 学习 "52个方法 第6章 45条 使用 dispath_once 来执行只需运行一次的线程安全代码"

    百度定义:单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例. 维基百科:在软件工程中,单例是一种用于实现单例的数学概念,即将 ...

  7. Linux Shell基础 通配符

    通配符 在 Bash 中,如果需要模糊匹配文件名或目录名,就要用到通配符.下面为常用的通配符. 表 1 通配符 通配符 作 用 ? 匹配一个任意字符 * 匹配 0 个或任意多个任意字符,也就是可以匹配 ...

  8. rsh命令配置于使用

    安装环境:一台centos6.10虚拟机,一台centos7.5虚拟机,全部使用root用户登录. 两台机器上都要安装rsh.rsh-server.xinetd包. 两台机器都要关闭防火墙并配置/et ...

  9. UNIX 系统常用管理命令

    一. 引言 UNIX系统作为一种强大的多用户分时操作系统,在越来越多的场合受到了应用,同时,对UNIX的系统管理的要求也随之越来越多,但目前的书籍对UNIX系统管理命令介绍的并不是很多.本文主要是针对 ...

  10. 跨平台移动开发 App-Framework DEMO 演示

    穿越到2015 回到->MarkFan的程序员客栈 App-Framework   DEMO 演示 点击APK包下载 点击Demo代码下载 官方网站 :http://app-framework- ...