从一个简单的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= ...
随机推荐
- jQuery 查找标签
1 基本选择器 2 基本筛选器 3 属性选择器 4 间接选择 1 基本选择器 //id选择器: $("#id") //标签选择器: $("tagName") / ...
- JavaWeb—过滤器Filter
1.Filter简介 Filter称之为过滤器,是用来做一些拦截的任务.比如客户端请求服务器的某个资源时(可以是Servlet.JSP.HTML等等),我们可以拦截.当服务器返回资源给客户端的时候,我 ...
- Django工作小笔记
场景一:如果model中字段用CharField,然而你想用数字(类似IntegerField)排序,此时可以用django的extra函数直接调用原生sql的CAST函数即可 Score.objec ...
- Hub,bridge,switch and router的区别
首先说HUB,也就是集线器.它的作用可以简单的理解为将一些机器连接起来组成一个局域网.而交换机(又名交换式集线器)作用与集线器大体相同.但是两者在性能上有区别:集线器采用的式共享带宽的工作方式,而交换 ...
- cut命令学习
cut最基本的用法: -f 列号:提取第几列 -d 分隔符:按照指定分隔符分割列(默认是制表符tab) 测试用例:(制表符)
- django-admin 设计User外键，设计model
设置外键 class profile_user(AbstractBaseUser, PermissionsMixin): company = models.ForeignKey(Company, de ...
- DP专题(不定期更新)
1.UVa 11584 Partitioning by Palindromes(字符串区间dp) 题意:给出一个字符串,划分为若干字串,保证每个字串都是回文串,同时划分数目最小. 思路:dp[i]表示 ...
- iOS获取某个日期后n个月的日期
一.给一个时间,给一个数,正数是以后n个月,负数是前n个月: -(NSDate *)getPriousorLaterDateFromDate:(NSDate *)date withMonth:(NSI ...
- 利用 :before 特性实现图片按比例显示
好吧,想不到自称布局小沙弥的我会被图片按比例显示给尴尬到. 设计师跟我说,这里的图要按 750x330 的,好吧,但这图是屏宽呀,屏幕宽度会变化的,那高度也会不定咯, 要么裁图片(工作量大),要么给定 ...
- 主攻ASP.NET.4.5.1 MVC5.0之重生:系统角色与权限(二)
系统角色篇 数据结构 用户管理 Controller代码 public class SystemUserController : Controller { //public void Log() // ...