<!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. 008-ThreadLocal

    一.基本用法 ThreadLocal是一个容器,用于存放线程的局部变量.如果ThreadLocalVariable(线程局部变量)更加好理解. 在Jdk 1.2 java.lang.ThreadLoc ...

  2. List contents of directories in a tree-like format

    Python programming practice. Usage: List contents of directories in a tree-like format. #!/usr/bin/p ...

  3. 如何使用 LINQ 执行插入、修改和删除操作

        本实例实现创建 LINQ To SQL 类对数据库进行插入.修改和删除的操作:以下是 具体步骤: 1 )建立 windows 窗体应用项目文件 2 )选择 ' 项目 \ 添加新项 ' 菜单,在 ...

  4. net mvc 利用NPOI导入导出excel

    1.导出Excel : 首先引用NPOI包(Action一定要用FileResult) /// <summary> /// 批量导出需要导出的列表 /// </summary> ...

  5. ubuntu安装java jdk

    openjdk安装http://openjdk.java.net/install/ 一.下载 首先,当然是要下载了. 地址:http://www.oracle.com/technetwork/java ...

  6. ODS

    一般在带有ODS的系统体系结构中,ODS都设计为如下几个作用: 1.在业务系统和数据仓库之间形成一个隔离层 一般的数据仓库应用系统都具有非常复杂的数据来源,这些数据存放在不同的地理位置.不同的数据库. ...

  7. EGLImage与纹理

    http://blog.csdn.net/sunnytina/article/details/51895406 Android使用Direct Textures提高glReadPixels.glTex ...

  8. Shell编程之Linux信号及信号跟踪

    一.Linux信号 1.什么是信号? Linux信号是由一个整数构成的异步消息,它可以由某个进程发给其他进程,也可以在用户按下特定键发生某种异常事件时,由系统发给某个进程. 2.信号列表 [root@ ...

  9. 结合canvas做雨滴特效

    雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. js常用方法汇总

    产生在m.n之间的随机整数 //Math.round()把数四舍五入为最接近的整数. function random(m, n) { return Math.round(Math.random() * ...