jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果。分享给大家供大家参考。具体如下：
这是一款jquery菜单特效，点击后高亮背景，个性的菜单特效。网上见到比较多的菜单了，不过像这样这么简单的方法来实现却不多见，本菜单整体简洁，点击导航栏上的任意菜单项后，该菜单项的背景变成黑色，并且鼠标移走后，仍然固定保持黑色，记住了菜单的位置。
运行效果如下图所示：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-menu-set-focus-style-codes/
具体代码如下：
<!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>
<title>jquery点击后高亮背景的菜单特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font:normal 14px/24px 'MicroSoft YaHei';}
.cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;}
.cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;}
.cotrs a:hover{ text-decoration:none; background:#000;}
.cotrs a.thisclass{text-decoration:none; background:#000;}
</style>
</head>
<body>
<br><br><br>
<div class="cotrs">
<a href='javascript:' class="thisclass">首页</a>
<a href='javascript:'>菜单导航</a>
<a href='javascript:'>时间日期</a>
<a href='javascript:'>焦点图</a>
<a href='javascript:'>tab标签</a>
<a href='javascript:'>jquery特效</a>
<a href='javascript:'>在线客服</a>
<a href='javascript:'>广告代码</a>
<a href='javascript:'>相册代码</a>
<a href='javascript:'>图片特效</a>
<a href='javascript:'>名站特效</a>
<a href='javascript:'>其他代码</a>
<a href='javascript:'>HTML5</a>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
$(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
-
本文向大家介绍jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】，包括了jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现点击后高亮背景固定显示的菜单效果。分享给大家供大家参考，具体如下： 运行效果图如下： 完整实例代码点击此处本站下载。 更多关于jQuery相关内容感兴趣的读者可查看本
-
本文向大家介绍JS实现选中当前菜单后高亮显示的导航条效果，包括了JS实现选中当前菜单后高亮显示的导航条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下： 这里演示选中当前菜单后，该菜单高亮显示，也就是说在不改变菜单CSS代码的情况下，用JavaScript去控制菜单的背景，如果该菜单项被点击后，将赋予它一个与众不
-
本文向大家介绍jQuery实现可高亮显示的二级CSS菜单效果，包括了jQuery实现可高亮显示的二级CSS菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现可高亮显示的二级CSS菜单效果。分享给大家供大家参考。具体如下： 这里实现鼠标放在二级菜单上，一级菜单可高亮显示，以指示当前菜单所在的位置，引入了jQuery插件使其在做对简洁度方面优化的非常好，用较少的代码实现想
-
本文向大家介绍js实现二级菜单点击显示当前内容效果，包括了js实现二级菜单点击显示当前内容效果的使用技巧和注意事项，需要的朋友参考一下 最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且html布局并不是父子级关系，具体请看效果图如下 html结构入下 css样式我这里就不一一罗列了，根据你自己页面需求自己设计 下面是重要内容js 这是一个简单的案例，小生入行不久，有什么不
-
本文向大家介绍jQuery实现的背景动态变化导航菜单效果，包括了jQuery实现的背景动态变化导航菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下： 这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单
-
本文向大家介绍jQuery实现菜单栏导航效果，包括了jQuery实现菜单栏导航效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。