jquery中如何加UL下lI的背景图，选中时去除背景图

添加 li 的背景图可用如下css样式

li{background:url('bg.png')}  // 设置li元素的背景图为当前目录下的bg.png

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的效果

=w=,三个方法……

一：把ul或li 中的行高删掉。

二：修改图片，把那红色的画下一点，可做成gif透明图（如原本图为：16*16，可画成：16*21，红色部分在最底部。）。

三：去掉list-style-image属性，改为在li 中用 background 属性

如：

ul{list-style:none}

li{padding-left:18pxbackground:url(pot.gif) no-repeat left 5px}

以上……

---