一個4tab選項卡頁面（一個json）

1.cluster.html

<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<!--     css  樣式          -->
<link href="css/style.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
<style media="screen" type="text/css">
.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+= '<p 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>'+
										'</p>';
									}
								}

								$('.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+= '<p 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>'+
									'</p>';
								}
							}
							$('.list').html(str);
						}
				})
				$(this).addClass("me_line").siblings().removeClass("me_line");
			})

})

</script>

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"
        }
    ]
}