li{background:nome} // 取消背景图
所以实现上述要求可以采用如下思路：为取消背景图样式设定一个class，点毕铅轮击li元素时为其应用此样式。
实例演示如下：
创建Html元素
<div class="box"><span>演示点击li去除背景样式：</span><br>
<div class="content">
<li>list-item-1</li>
<li>list-item-2</li>
<li>list-item-3</li>
<li>list-item-4</li>
</div>
</div>手信
设置css样式
div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}div.box span{color:#999font-style:italic}
div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}
li{margin:10px 0padding:10px 0background:url('bg1.png')}
.selected{background:none}
编写jquery代码
$(function(){$("li").click(function() {
$(this).addClass('selected').siblings('li').removeClass('selected')
})
})
观察效果
初始样式
点击第激梁二个li的效果
接着点击第四个li的效果
添加删除毁基是一项旅余档基本功能，下面就来看一下jquery怎么在图片上添加删除按钮。
设备：联想电脑
系统：xp
软件：jQuery2019
1、首先写一个HTML架构，如图所示代码。
2、新建一个div，div中包裹着一个img标拆乱签，视为图片。
3、再次书写一个div，之后会赋予点击事件。
4、然后使用onclick函数进行点击时间的绑定，如图所示。
5、引入jquery.js，之后使用其中的函数。
6、最后编写addButton方法，这样一切就完成了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>显示背景</橘猛title>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$.each($("#PagingView a"),function(index,item){
switch($(item).text()){
case "First":
$(item).css({"color":"#ff0","background":"url(logo.png)"})
break
case "Next":
$(item).css({"color":"#f00","background":"url(logo.png)"})
break
case "Last":
$(item).css({"color":"#0f0"圆亮桥,"background":"url(logo.png)"})
break
}
})
})
</script>
</head>
<body>
<div id="PagingView" style="width:500pxheight:500px">
<a href="javascript:" style="height:100pxwidth:100pxdisplay:block"键乎>First</a>
<a href="javascript:" style="height:100pxwidth:100pxdisplay:block">Next</a>
<a href="javascript:" style="height:100pxwidth:100pxdisplay:block">Last</a>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）