jquery 简单导航实现代码_Javascript教程-查字典教程网
jquery 简单导航实现代码
jquery 简单导航实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:$(function(){$("li").hover(function(){$(this).addClass("ho");...

复制代码 代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

$("li").hover(function(){

$(this).addClass("ho");

},

function(){

$(this).removeClass("ho");

});

$("li").click(function(){

$(this).removeClass("ho").addClass("xiaoshi").siblings().removeClass("xiaoshi");

});

})

</script>

<style type="text/css">

li{background-color:#099; float:left; width:50px; height:25px; margin-left:1px; list-style:none;}

.xiaoshi{background-color:#FF0;}

.ho{background-color:#F00;}

</style>

</head>

<body>

<div>

<ul>

<li>我第1</li>

<li>我第2</li>

<li>我第3</li>

<li>我第4</li>

<li>我第5</li>

<li>我第6</li>

</ul>

</div>

</body>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类