从一个简单的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= ...
随机推荐
- github的代码上传成功但是不显示绿格子（一直拖....心痛的教训.....）
损失了我特么的很多格子啊啊啊啊,必死强迫症啊!!!! 究其原因就是客户端绑定邮箱错误 本地 :git config user.email 显示邮箱是否和github中设定的一样? git config ...
- 006-搭建框架-实现AOP机制【三】AOP技术
2.3.spring+aspectj Spring在集成了aspectj后,同时也保留了以上的切面与代理的配置方式. 将Spring与aspectj集成与直接使用aspectj不同,不需要定义Aspe ...
- 005-搭建框架-实现AOP机制【二】AOP技术
一.什么是AOP aspect-oriented programming,面向切面编程,对oop的一种补充. 著名示例,aspectj,spring+aspectj 二.aop之代码重构 2.1.代 ...
- spring boot 2.0添加对fastjson的支持
首先引入fastjson的maven依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId&g ...
- windows中使用Findwindow函数与FindWindowEx函数来实现自动控制、触发第三方软件事件的方法
FindWindow 用来根据类名和窗口名来得到窗口句柄的.但是这个函数不能查找子窗口,也不区分大小写. 如果要从一个窗口的子窗口中查找需要使用FindWindowEX. 如果要搜索的外部程序的窗口标 ...
- BAPI_ACC_DOCUMENT_POST 解决原因代码输入问题-利用BADI
(1) 复制函数SAMPLE_INTERFACE_RWBAPI01为Z SAMPLE_INTERFACE_RWBAPI01 *"---------------------------- ...
- Eclipse解决JSP页面乱码问题
解决方案 1.首先选择 Window --> Preferences --> General--> Content Types --> text (点击左边的+,显示 ...
- EasyMock 常见异常
1. java.lang.IllegalStateException: calling verify is not allowed in record state 含义:不允许在记录状态(record ...
- windows安装pywin32
下载旧版 https://sourceforge.net/projects/pywin32/files/pywin32/ 下载新版 https://github.com/mhammond/pywin3 ...
- 前端基础之JavaScript_(1)_ECMAScript
一.JavaScript概述 JavaScript的历史 992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase. ...