今天要解釋的是如下界面
主要實現了：
1.模擬后台的json數據，動態生成li標簽
2.導航欄的下划線
3.給li標簽右邊設置圖片
4.動態生成的li標簽，設置選中的li的點擊事件，將右邊的圖片換掉
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>頁面一</title> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> body{ margin: 0; padding: 0; height: 100%; background: gainsboro; } .wrap{ height: 100%; } #nav ul{ margin: 10px; } #title{ width: 100%; height: 100px; background-color: red; } #nav{ width: 100%; height: 20%; background-color: white; } #nav li{ display: inline-block; width:25%; height:20%; float: left; } #nav li a{ color: #0f0f0f; text-align: center; font-size: 40px; } #nav ul li a:hover{ color:red; } /*通過span設置下划線*/ #nav ul li a:hover span{ padding-bottom: 17px; border-bottom: 2px solid ; } .item{ padding: 40px; margin-top: 40px; margin-right: 40px; margin-bottom: 40px; border-radius: 25px;
//給li標簽右邊設置圖片 background: red url('../2.png') no-repeat right center; } .i1{ padding: 40px; margin-top: 40px; margin-right: 40px; margin-bottom: 40px; border-radius: 25px; background: red url('../1.png') no-repeat right center; } </style> </head> <body> <div class="wrap"> <div id="title"> 我是標題 </div> <div id="nav"> <ul class="nav nav-bar"> <li><a href="#" onclick="show1()"><span>個人資料</span></a></li> <li><a href="#" onclick="show2()"><span>信息</span></a></li> <li><a href="#" onclick="show3()"><span>產品兌換</span></a></li> <li><a href="#" onclick="show4()"><span>兌換歷史</span></a></li> </ul> </div> <div id="content" style="font-size: 40px"> <ul id="list" style="list-style: none "> </ul> </div> </div> </body> <script> function show1() { //var obj = jQuery.parseJSON('{"name":"John","age":"20"}'); //第一種 //$("#list").html("<table><tr><td>" + obj.name + "</td><td>" + obj.age + "</td></tr></table>"); //第三種 // var data = [{"name":"張三", "age":"21"},{"name":"李四", "age":"21"},{"name":"王五", "age":"21"}]; // for(var i=0;i<data.length;i++){ // var a = "<li>姓名：" + data[i].name + ",年齡: "+ data[i].age +"</li>"; // $("#list").append(a); // } //第二種 $.ajax({ url: 'data1.json', //在后文后有元數據 type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //加載執行方法 error: erryFunction, //錯誤執行方法 success: succFunction //成功執行方法 }) function LoadFunction() { $("#list").html('加載中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); // eval將字符串轉成對象數組 // var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; // json = eval(json); // alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //json數組 var str=""; $.each(json, function (index) { //循環獲取數據 var id = json[index].id; var name = json[index].name; //$("#list").html($("#list").html() + "<br>" + id + " - " + name + "<br/>"); //alert(id); str += "<li class='item'>"+id+"<br>"+name+"</li>"; $("#list").html($("#list").html() + str); //我想其實應該是這樣的：當你點擊某一項的時候，會進入一個URL，來進行更改數據庫的操作。 //系統怎么識別出來你點擊的是哪一項？ //jQuery中如何判斷當前點擊的是第幾個li，使用$(this).index()取得li的下標 }); $("#content #list .item").click(function () { alert($(this).index()); $(this).toggleClass("i1"); }); } }
//function show2() show3() show4()的實現和show1()原理是一樣的，這里就不再寫了。 </script> </html>
上邊所模擬的數據data1.json
[
{
"id":"EWVEB1",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB2",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB3",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB4",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB5",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB6",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB7",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB8",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB9",
"name":"車票從任何雲頂長途快車車站至纜車站"
},
{
"id":"EWVEB10",
"name":"車票從任何雲頂長途快車車站至纜車站"
}
]