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