Jquery 菜單點擊,划過換背景色代碼


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-5-1</title>
<style type="text/css">
ul{margin:0; padding:0; line-height:44px;list-style:none;}
li{float:left; width:143px; display:block; text-align:center;}
a{text-decoration:none; color:#fff; font-weight:bold;}
.one{background:red}
.two{background:blue}
.three{background:green}
</style>
<script type="text/javascript">
$(function(){
var $me=$('ul.menu li');
$me.hover(function(){
$(this).addClass('two');
},function(){
$(this).removeClass('two');
}
)
$me.click(function(){
$(this).addClass('three').siblings().removeClass("three");
}
)
})
</script>
</head>
<body>
<ul class="menu">
    <li class="one"><a href="#">汽車配件</a> </li>
    <li class="one" ><a href="#">夏杏中華</a> </li>
    <li class="one"><a href="#">聯系我們</a> </li>
    <li class="one"><a href="#" >支付方式</a> </li>
    <li class="one"><a href="#" >工作機會</a> </li>
    <li class="one"><a href="#" >至尚簡介</a> </li>
    <li class="one"><a href="#">一代</a> </li>
</ul>
</body>
</html>




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com