$(".test_img").css("background-image","url(../img/testimg/text_"+xstart+".png)")
你第二行的变量如果我没猜错的话,你是用了PHP的模版语言,所以肯定是错的
li{background:url('bg.png')} // 设置li元素的背景图为当前目录下的bg.pngli{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的效果
<!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条)