html中怎么给ul 中的 li分别添加背景图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中怎么给ul 中的 li分别添加背景图片相关的知识，希望对你有一定的参考价值。
<ul>
<li>1<li/>
<li>2<li/>
<li>3<li/>
<li>4<li/>
<ul>
ul libackgorund:url(xx.jpg)
不同的话，要单独给li加样式，如
.li1backgorund:url(xx.jpg)
.li2backgorund:url(xx.jpg) 参考技术A 里面嵌入一个<img>标签。 参考技术B 在li中添加img标签
jquery判断是不是添加样式
html:<ul>
<li>第一行<div class="hover">sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
要求：鼠标经过时li添加背景色，离开时删除背景色，如果li的class=“hover”是显示的，则鼠标经过时li不添加背景色。。。请问用jquery怎么做，O(∩_∩)O谢谢
可以看下面的例子
1.定义了!important的
<!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/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC !important;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
2.不定义!important的
<!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/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
3.加判断的
<!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/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html> 参考技术A <ul id="tabfirst">
<li class="hover">第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
$("#tabfirst li").each(function(index)
$(this).mouseover(function() $(this).removeClass("hover");
$(this).addClass("hover");
);
);
我没验证，用法是大概是这样，具体你自个看下吧，应该不还要用到mouseout方法，鼠标移出时 参考技术B 用jquery的hover(over,out)事件
$("ul>li").hover(
function()
if($(this).attr("class")!="hover")
$(this).css("background-color","#FF0000");
,
function()
if($(this).attr("class")!="hover")
$(this).css("background-color","#FFFFFF");
); 参考技术C 查下 api撒
以上是关于html中怎么给ul 中的 li分别添加背景图片的主要内容，如果未能解决你的问题，请参考以下文章