<!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. 0403-服务注册与发现-客户端负载均衡-Ribbon的基本使用

    一.概述 问题1.上一篇文章已说明如何注册微服务,但是调用方如何调用,以及如何防止硬编码.即电影微服务调用用户微服务 问题2.用户微服务多个节点,调用服务方如何负载均衡 二.实现负载均衡方式 2.1. ...

  2. 010-spring事务管理

    一.Spring的事务传播行为 事务是从哪里传播到哪里? 是从方法A传播至方法B. Spring事务类型详解: PROPAGATION_REQUIRED--如果当前没有事务,就新建一个事务.如果有,就 ...

  3. $《第一行代码：Android》读书笔记——第8章 通知和手机多媒体

    本章主要介绍了通知.短信.调用摄像头和相册.播放多媒体文件等内容. (一)通知的用法 1.通知的基本用法 见如下代码(详细操作步骤在代码注释中): (1)先创建一个布局文件,其中只有一个名为“发送通知 ...

  4. 微信小程序相关资料整理

    微信小程序官方介绍https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=201818 微信小程序开发资源https://jue ...

  5. 【leetcode刷题笔记】Text Justification

    Given an array of words and a length L, format the text such that each line has exactly L characters ...

  6. 活用:after 让图片垂直居中

    现在莫名虽然更喜欢 background 但大多时候还是选择用 img,这其中的利弊争议不在本文中赘述. 那么在布局中常会遇到定高容器中图片居中的需求,这时就有很多方法了呀: line-height ...

  7. 【Flask】Sqlalchemy group_by having

    ### group_by:根据某个字段进行分组.比如想要根据性别进行分组,来统计每个分组分别有多少人 ### having: having是对查找结果进一步过滤.比如只想要看未成年人的数量,那么可以首 ...

  8. Shell编程之变量进阶

    一.变量知识进阶 1.特殊的位置参数变量 实例1:测试$n(n为1...15) [root@codis-178 ~]# cat p.sh echo $1 [root@codis-178 ~]# sh ...

  9. JVM原理（Java代码编译和执行的整个过程+JVM内存管理及垃圾回收机制）

    转载注明出处: http://blog.csdn.net/cutesource/article/details/5904501 JVM工作原理和特点主要是指操作系统装入JVM是通过jdk中Java.e ...

  10. centos 下安装python3.6.2

    具体详情: http://www.cnblogs.com/vurtne-lu/p/7068521.html