zoukankan      html  css  js  c++  java
  • 从一个简单的Tab切换开始——与AJAX的结合

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #tab{
                300px;
               border:3px solid #ccc;
            }
            #tab .active{
                background: #fff;
            }
            #tab h3{
                margin:0;
                padding:0;
                font-size:14px;
                float:left;
                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

  • 相关阅读:
    Python 绘制图表之我见 ---一个java程序员的看法
    机器学习系统设计--1.4
    XUtils3 的 环境搭建与简单使用
    关于SAX
    TensorFlow之Varibale 使用方法
    安装Nvidia k80驱动步骤
    TensorFlow 在android上的Demo(1)
    Python 去剑式
    python编程技巧2
    python语言技巧
  • 原文地址:https://www.cnblogs.com/alone2015/p/5523479.html
Copyright © 2011-2022 走看看