一个4tab选项卡页面(一个json)
2016-11-09 15:04
197 查看
1.cluster.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!-- css 样式 -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style media="screen">
.on{
display: block;
}
</style>
<!-- js -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
function GetQueryString(name){
/*定义正则,用于获取相应参数*/
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
/*字符串截取,获取匹配参数值*/
var r = window.location.search.substr(1).match(reg);
/*返回参数值*/
if(r!=null)return unescape(r[2]); return null;
}
</script>
<script type="text/javascript">
$(function(){
list_id = GetQueryString("list_id");
$.ajax({
url: "data/list.json",
type: 'GET',
dataType: 'json', //here
success:function(data) {
var list_ids = data.data[1].list_id;
listID(list_ids);
var str = '';
var idsLength = data.data.length;
for (var i = 0; i < idsLength; i++) {
str+= '<li class="bao" list_id="'+data.data[i].list_id+'">'+data.data[i].menu+'</li>';
}
$('.menu_ul').append(str);
}
})
// 默认tab
function listID(list_ids) {
$.ajax({
url: "data/news.json",
type: 'GET',
dataType: 'json', //here
success:function(data) {
var str = '';
var stylesheet = data.data.length;
for (var i = 0; i < stylesheet; i++) {
if (data.data[i].list_id == list_ids) {
str+= '<div class="ls_list" list_id="'+data.data[i].list_id+'">'+
'<span class="ls_lie">'+data.data[i].title+'</span>'+
'<span class="ls_mian">正面</span>'+
'<a href="热点详情.html" class="ls_stage">'+data.data[i].detail+'</a>'+
'<span class="ls_source">来源:'+data.data[i].laiyuan+'</span>'+
'<span class="ls_tim">时间:'+data.data[i].date+'</span>'+
'</div>';
}
}
$('.list').html(str);
$('.menu_zi').find('li').eq(1).addClass("me_line");
}
})
}
// 1 点击显示联动列表
$(".menu_zi").on("click","li", function(e) {
var list_id;
list_id = this.getAttribute("list_id");
$(this).siblings().removeClass("me_line");
$(this).addClass("me_line");
$.ajax({
url: "data/news.json",
type: 'GET',
dataType: 'json', //here
data: {
list_id:list_id
},
success:function(data) {
var str = '';
var stylesheet = data.data.length;
for (var i = 0; i < stylesheet; i++) {
if (data.data[i].list_id == list_id) {
str+= '<div class="ls_list" list_id="'+data.data[i].list_id+'">'+
'<span class="ls_lie">'+data.data[i].title+'</span>'+
'<span class="ls_mian">正面</span>'+
'<a href="热点详情.html" class="ls_stage">'+data.data[i].detail+'</a>'+
'<span class="ls_source">来源:'+data.data[i].laiyuan+'</span>'+
'<span class="ls_tim">时间:'+data.data[i].date+'</span>'+
'</div>';
}
}
$('.list').html(str);
}
})
$(this).addClass("me_line").siblings().removeClass("me_line");
})
})
</script>
<title>热点</title>
</head>
<body>
<!-- top 头部 -->
<header>
<div>
<li class="back"><a onclick="javascript:history.back()"><img src="images/arrow.png"></a></li>
<p>热点</p>
</div>
</header>
<!-- top 站位 -->
<div class="station"></div>
<!-- 菜单导航 -->
<div class="menu_zi">
<ul class="menu_ul">
<!-- <li class="bao">头条</li>
<li class="bao me_line">新闻</li>
<li class="bao">论坛</li>
<li class="bao">微博</li> -->
</ul>
</div>
<!-- 主内容 -->
<div class="list">
</div>
<!-- bottom 底部 -->
<div class="bao_bottom">
<div class="b_bot_kuan">
<ul>
<li><img class="share_im" src="images/baogao_bot_icon01.png" />分享</li>
<li><img class="share_im" src="images/baogao_bot_icon02.png" />收藏</li>
</ul>
</div>
</div>
</body>
<!-- js -->
<script type="text/javascript" src="js/baogao_menu.js"></script>
</html>
2.news.json
{
"data" : [
{
"id": "1",
"pid": "0",
"list_id": "1",
"title": "1阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "2",
"pid": "0",
"list_id": "1",
"title": "2乐视网中报能“挤”出多少“水”",
"detail": "自2010年上市以来,有关乐视网的争议就一直不断,不仅因实际控制人贾跃亭先生的“个人秀”,更是因投资人针对乐视生态的褒贬不一引发了市场的长期热议。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "3",
"pid": "0",
"list_id": "1",
"title": "3阿里巴巴发布周报收入超千亿0000",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "4",
"pid": "0",
"list_id": "2",
"title": "11创业者,我们想知道关于你的50件事",
"detail": "也许你还在漫长的“寒冬”中煎熬,也许你刚刚获得得以进入下一轮竞争的筹码,但等待你的依旧是漫长而未知的前路。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "5",
"pid": "0",
"list_id": "2",
"title": "22阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "6",
"pid": "0",
"list_id": "2",
"title": "33阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "7",
"pid": "0",
"list_id": "3",
"title": "111双十一不只是购物,更是巨大的金融市场",
"detail": "双十一带来的好处,不仅是产生巨额的交易金额,对天猫的好兄弟蚂蚁金服来说,如果靠这个节日推火哪怕一款金融产品,收益也是巨大的。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "8",
"pid": "0",
"list_id": "3",
"title": "222阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "9",
"pid": "0",
"list_id": "3",
"title": "333阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "10",
"pid": "0",
"list_id": "4",
"title": "1111布局精准医疗,人和未来从用户定位和BT(生物技术)+IT技术优势切入",
"detail": "精准医疗火了,以基因检测撬动的国内精准医疗市场规模将是万亿元级别,而其中基因检测市场规模则为数百亿元规模。布局精准医疗市场,除了提供测序服务,基因检测公司积极拓展精准医疗产业链上下游公司的业务合作也将非常关键。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "11",
"pid": "0",
"list_id": "4",
"title": "2222阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "12",
"pid": "0",
"list_id": "4",
"title": "3333阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
}
]
}
3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!-- css 样式 -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style media="screen">
.on{
display: block;
}
</style>
<!-- js -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
function GetQueryString(name){
/*定义正则,用于获取相应参数*/
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
/*字符串截取,获取匹配参数值*/
var r = window.location.search.substr(1).match(reg);
/*返回参数值*/
if(r!=null)return unescape(r[2]); return null;
}
</script>
<script type="text/javascript">
$(function(){
list_id = GetQueryString("list_id");
$.ajax({
url: "data/list.json",
type: 'GET',
dataType: 'json', //here
success:function(data) {
var list_ids = data.data[1].list_id;
listID(list_ids);
var str = '';
var idsLength = data.data.length;
for (var i = 0; i < idsLength; i++) {
str+= '<li class="bao" list_id="'+data.data[i].list_id+'">'+data.data[i].menu+'</li>';
}
$('.menu_ul').append(str);
}
})
// 默认tab
function listID(list_ids) {
$.ajax({
url: "data/news.json",
type: 'GET',
dataType: 'json', //here
success:function(data) {
var str = '';
var stylesheet = data.data.length;
for (var i = 0; i < stylesheet; i++) {
if (data.data[i].list_id == list_ids) {
str+= '<div class="ls_list" list_id="'+data.data[i].list_id+'">'+
'<span class="ls_lie">'+data.data[i].title+'</span>'+
'<span class="ls_mian">正面</span>'+
'<a href="热点详情.html" class="ls_stage">'+data.data[i].detail+'</a>'+
'<span class="ls_source">来源:'+data.data[i].laiyuan+'</span>'+
'<span class="ls_tim">时间:'+data.data[i].date+'</span>'+
'</div>';
}
}
$('.list').html(str);
$('.menu_zi').find('li').eq(1).addClass("me_line");
}
})
}
// 1 点击显示联动列表
$(".menu_zi").on("click","li", function(e) {
var list_id;
list_id = this.getAttribute("list_id");
$(this).siblings().removeClass("me_line");
$(this).addClass("me_line");
$.ajax({
url: "data/news.json",
type: 'GET',
dataType: 'json', //here
data: {
list_id:list_id
},
success:function(data) {
var str = '';
var stylesheet = data.data.length;
for (var i = 0; i < stylesheet; i++) {
if (data.data[i].list_id == list_id) {
str+= '<div class="ls_list" list_id="'+data.data[i].list_id+'">'+
'<span class="ls_lie">'+data.data[i].title+'</span>'+
'<span class="ls_mian">正面</span>'+
'<a href="热点详情.html" class="ls_stage">'+data.data[i].detail+'</a>'+
'<span class="ls_source">来源:'+data.data[i].laiyuan+'</span>'+
'<span class="ls_tim">时间:'+data.data[i].date+'</span>'+
'</div>';
}
}
$('.list').html(str);
}
})
$(this).addClass("me_line").siblings().removeClass("me_line");
})
})
</script>
<title>热点</title>
</head>
<body>
<!-- top 头部 -->
<header>
<div>
<li class="back"><a onclick="javascript:history.back()"><img src="images/arrow.png"></a></li>
<p>热点</p>
</div>
</header>
<!-- top 站位 -->
<div class="station"></div>
<!-- 菜单导航 -->
<div class="menu_zi">
<ul class="menu_ul">
<!-- <li class="bao">头条</li>
<li class="bao me_line">新闻</li>
<li class="bao">论坛</li>
<li class="bao">微博</li> -->
</ul>
</div>
<!-- 主内容 -->
<div class="list">
</div>
<!-- bottom 底部 -->
<div class="bao_bottom">
<div class="b_bot_kuan">
<ul>
<li><img class="share_im" src="images/baogao_bot_icon01.png" />分享</li>
<li><img class="share_im" src="images/baogao_bot_icon02.png" />收藏</li>
</ul>
</div>
</div>
</body>
<!-- js -->
<script type="text/javascript" src="js/baogao_menu.js"></script>
</html>
2.news.json
{
"data" : [
{
"id": "1",
"pid": "0",
"list_id": "1",
"title": "1阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "2",
"pid": "0",
"list_id": "1",
"title": "2乐视网中报能“挤”出多少“水”",
"detail": "自2010年上市以来,有关乐视网的争议就一直不断,不仅因实际控制人贾跃亭先生的“个人秀”,更是因投资人针对乐视生态的褒贬不一引发了市场的长期热议。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "3",
"pid": "0",
"list_id": "1",
"title": "3阿里巴巴发布周报收入超千亿0000",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "4",
"pid": "0",
"list_id": "2",
"title": "11创业者,我们想知道关于你的50件事",
"detail": "也许你还在漫长的“寒冬”中煎熬,也许你刚刚获得得以进入下一轮竞争的筹码,但等待你的依旧是漫长而未知的前路。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "5",
"pid": "0",
"list_id": "2",
"title": "22阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "6",
"pid": "0",
"list_id": "2",
"title": "33阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "7",
"pid": "0",
"list_id": "3",
"title": "111双十一不只是购物,更是巨大的金融市场",
"detail": "双十一带来的好处,不仅是产生巨额的交易金额,对天猫的好兄弟蚂蚁金服来说,如果靠这个节日推火哪怕一款金融产品,收益也是巨大的。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "8",
"pid": "0",
"list_id": "3",
"title": "222阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "9",
"pid": "0",
"list_id": "3",
"title": "333阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "10",
"pid": "0",
"list_id": "4",
"title": "1111布局精准医疗,人和未来从用户定位和BT(生物技术)+IT技术优势切入",
"detail": "精准医疗火了,以基因检测撬动的国内精准医疗市场规模将是万亿元级别,而其中基因检测市场规模则为数百亿元规模。布局精准医疗市场,除了提供测序服务,基因检测公司积极拓展精准医疗产业链上下游公司的业务合作也将非常关键。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "11",
"pid": "0",
"list_id": "4",
"title": "2222阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
},
{
"id": "12",
"pid": "0",
"list_id": "4",
"title": "3333阿里巴巴发布周报收入超千亿",
"detail": "财报显示,2016财年,阿里巴巴集团平台成交额达3.092万亿元人民币,同比增速度在阿里巴巴不长27%。拥有3.6万名员工的阿里,收入达到1011亿元人民币,成为人均主能最高的中国互联网公司。",
"laiyuan": "新华网",
"date": "2016/05/25"
}
]
}
3
相关文章推荐
- 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
- Tab选项卡和滑动门同时布局在一个页面上
- javascript 一个页面多个tab选项卡效果
- 一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
- ajax+json+ashx实现一个页面多个tab的分页
- 关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
- 在一个页面点击链接跳转至另一个页面的选项卡tab中
- 一个简单的javascript Tab选项卡切换控件
- 一个切换名言的页面(json)
- 选项卡 一个页面支持多个 表现 结构分离
- 使用vue.js写一个tab选项卡效果
- 实现一个简单的tab选项卡
- SpringMVC 方法里返回json或跳到一个页面
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- 如何在Drupal中为节点增加一个Tab选项卡
- JS-利用ajax获取json数据,并传入页面生成动态tab
- jquery与后台进行数据交互--前台发单一数据对象,后台返回一个json字符串 serlet配置页面
- jquery写的一个TabControl类,动态创建选项卡切换Tab
- JQuery+JSON+Struts返回一个List到页面
- 项目组给了我一个接口直接访问是json的数据,我怎么在得到接口中的json数据在页面显示啊!