动态生成li标签，并设置点击事件
今天要解释的是如下界面
主要实现了：
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":"车票从任何云顶长途快车车站至缆车站"
}
]
动态生成li标签，并设置点击事件的更多相关文章
- Iphone上对于动态生成的html元素绑定点击事件$(document).click()失效解决办法
在Iphone上,新生成的DOM元素不支持$(document).click的绑定方法,该怎么办呢? 百度了N久都没找到解决办法,在快要走投无路之时,试了试Google,我去,还真找到了,歪国人就是牛 ...
- jq给动态生成的标签绑定事件的几种方法
经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- 动态生成的DOM不会触发onclick事件的原因及解决方法
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...
- 关于在"a"标签中添加点击事件的一些问题
昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate() ...
- C# 动态生成的按钮及定义按钮的事件的代码
内容闲暇时间,把内容过程中比较常用的内容备份一下,如下的内容内容是关于C# 动态生成的按钮及定义按钮的事件的内容,应该对码农们也有用途. HtmlGenericControl control = ne ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- a标签上的点击事件
当我们在处理a标签上的点击事件时发现即使href=""里面为空,点击事件的效果也不明显,这种情况该如何处理呢?常见的处理方法有以下几种: 1.a href="javasc ...
随机推荐
- 工作总结 js 选择器选择多条元素 支持一起设置他们属性 $("#edumes input[type='radio']").prop("checked", false);
$("#edumes input[type='radio']").prop("checked", false); $("#edumes input[t ...
- python 2.*和3.*的变化
1.urllib2是python自带的模块,在python3.x中被改为urllib.request,如 <span style="font-size:12px;">u ...
- 关于 equals()与hashcode()方法
类重写了equals()方法也必须重写hashcode()方法,否则会导致该类无法与基于散列值的集合(HashMap.HashSet.HashTable)一起正常使用. hashcode()方法遵循的 ...
- ExtJs布局中，控件如何水平居中？
如此即可,有图有代码有j8: var formGridHead = Ext.create('Ext.form.Panel', { id: 'MyGridHead', region: 'north', ...
- egrep grep -E
egrep执行效果与"grep-E" Linux egrep命令用于在文件内查找指定的字符串. egrep执行效果与"grep-E"相似,使用的语法及参数可参照 ...
- caioj1097: [视频]树状数组1（快速求和计算） cdq分治入门
这题虽然是个树状数组,但是也可以用cdq分治做啊~~,这个就是一个浅显的二维偏序的应用? cdq分治和普通的分治有什么区别? 举个栗子:有4个小朋友,你请他们吃饭,假如你分治搞,就会分成很多子问题—— ...
- 利用js和CSS实现网页局部打印
1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...
- I.MX6 Android shutdown shell command
/******************************************************************************* * I.MX6 Android shu ...
- P4844 LJJ爱数数 数论
思路: 化简后得到(a+b)c=ab,设g=(a,b),A=a/g,B=b/g,则g(A+B)c=ABg^2,即(A+B)c=ABg 由题目已知条件:(a,b,c)=1,即(g,c)=1,g|(A+B ...
- Java-Runoob-高级教程-实例-字符串：08. Java 实例 - 字符串分割(StringTokenizer)
ylbtech-Java-Runoob-高级教程-实例-字符串:08. Java 实例 - 字符串分割(StringTokenizer) 1.返回顶部 1. Java 实例 - 字符串分隔(Strin ...