从一个简单的Tab切换开始——与AJAX的结合
<!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的结合的更多相关文章
- (一)在HTML页面中实现一个简单的Tab
在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...
- react简单的tab切换 (styled-components)
其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jQuery实现简单的tab切换
html: <section> <nav id="nav"> <a class="on">tab1</a& ...
- 使用原生js与jQuery分别实现一个简单的tab页签
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...
- 在HTML页面中实现一个简单的Tab
参考:http://blog.sina.com.cn/s/blog_6cccb1630100m23i.html HTML页面代码如下: <!DOCTYPE html PUBLIC "- ...
- 自己写的一个简单的Tab类
//------------- PS_DOM 功能函数 start----------------var PS_DOM ={ indexOf: function(arr, e){ for(var i= ...
随机推荐
- 2. 安装 Kerberos
2.1. 环境配置 安装kerberos前,要确保主机名可以被解析. 主机名 内网IP 角色 Vmw201 172.16.18.201 Master KDC Vmw202 172.16.18.202 ...
- 画图-drawpoint and drawpath
版权声明:本文因海牛宝宝童鞋才疏学浅,可能晦涩难懂,但也是呕心沥血之作,麻烦转载的时候留个申明. https://blog.csdn.net/u012321815/article/details/26 ...
- 用django写个CMS系统
上一篇介绍过django自带的flatpages,能够做简单的CMS.但是对于我们的真正的工作中的使用意义并不大.还是自己动手写一个吧. 不用说,一定是先从models开始的: from django ...
- 剑指offer 面试11题
面试11题: 题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4 ...
- Linux常用的指令(...编辑文件+保存)
mkdir命令用来创建目录 1 mkdir filename touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认方式),它们的数据将原封不动地保留下来:二是用来创建新的 ...
- 流量分析系统---echarts模拟迁移中 ，geocoord从后台获取动态数值
由于在echarts的使用手册中说了 {Object} geoCoord (geoCoord是Object类型) ,所以不能用传统的字符串拼接或数组的方式赋值.在后台的controller中用Map& ...
- python3 multiprocessing 模块
多进程 Multiprocessing 模块 multiprocessing 模块官方说明文档 Process 类 Process 类用来描述一个进程对象.创建子进程的时候,只需要传入一个执行函数和函 ...
- Yii2 使用 Beanstalk 队列系统
参考网址: Beanstalk:https://github.com/kr/beanstalkd Beanstalk console:https://github.com/ptrofimov/bean ...
- Linux Shell编程 sed命令
概述 sed 是一种几乎可以应用在所有 UNIX 平台(包括 Linux)上的轻量级流编辑器,体积小.所以,它可以对从如管道这样的标准输入中接收的数据进行编辑. sed 主要是用来将数据进行选取.替换 ...
- 玩转python主题模型程序库gensim
gensim是python下一个极易上手的主题模型程序库(topic model),网址在:http://radimrehurek.com/gensim/index.html 安装过程较为繁琐,参考h ...