手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 简单导航实现代码
jquery 简单导航实现代码
摘要:复制代码代码如下:$(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>

【jquery 简单导航实现代码】相关文章:

jQuery实现延迟跳转的方法

基于javascript简单实现对身份证校验

jQuery实现返回顶部效果的方法

基于jquery实现下拉框美化特效

jQuery 遍历函数详解

jQuery实现html表格动态添加新行的方法

jQuery实现表格行上移下移和置顶的方法

jQuery聚合函数实例

jquery简单实现外部链接用新窗口打开的方法

jQuery实现简单的列表式导航菜单效果代码

精品推荐
分类导航