从一个简单的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= ...
随机推荐
- python3 中引用 HTMLTestRunner.py 模块的注意事项
HTMLTestRunner.py支持python2中运行,如果在python3.6.2中引用HTMLTestRunner.py模块,需要做一下更改: 1.更改HTMLTestRunner.py模块中 ...
- 查看连接MYSQL数据库的IP信息
要统计数据库的连接数,我们通常情况下是统计总数,细分到每个ip地址: 方法一: ) as ip , count(*) from information_schema.processlist group ...
- Android Integer.parseInt java.lang.NumberFormatException: Invalid int解决方法
解决方法: http获取的字符串minutes去空字符串处理minutes.replaceAll("\\D+","").replaceAll("\r& ...
- JavaScript:学习笔记(5)——箭头函数=>以及实践
JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...
- Android中的动画使用总结
android中动画可分为三种:帧动画,补间动画,和属性动画.其中属性动画是google推荐的,它可以实现前面两种动画的效果,运用起来更加灵活. 帧动画:顾名思义,就是一帧一帧的图片,快速播放形成的动 ...
- iOS 11系列 - Xcode 9新特性
Xcode 9最近刚刚发布,带来了一系列不错的新特性,可以更好的帮助到开发者完成开发工作. Xcode Runtime Tool Xcode 9中有许多Runtime Tool可以帮助开发者找到代码错 ...
- 每天一个Linux命令（39）free命令
free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. (1)用法: 用法: free [选项参数] (2)功能: ...
- 【HackerRank】Insertion Sort Advanced Analysis（归并排序求数列逆序数对）
Insertion Sort is a simple sorting technique which was covered in previous challenges. Sometimes, ar ...
- Cocos2d-x项目移植到WP8系列之一：前传
原文链接: http://www.cnblogs.com/zouzf/p/3969993.html 许久没动笔了,随想一直都有动笔的想法,但拖来拖去,归根到底还是一个懒字吧 .发现人的惰性真是太强大了 ...
- 通过公钥解密密文思路（256bits RSA）
256bit RSA公钥安全系数极低,只需要几分钟即可破解密文,本文综合其他文章记录了一次解密256bits RSA加密的密文的过程,仅作为备忘. 1.分解公钥,分解出n与e: 1.1使用openss ...