jQuery导航菜单防刷新
为了实现最主要的功能,只写了一个粗糙的案例
CSS样式
ul,li{ list-style-type:none;}
.nav
{
width: 100%;
height: 35px;
line-height: 35px;
}
.nav ul{ width:100%; float:left;}
.nav li{ width:100px; float:left; text-align:center;}
.nav li a, .nav li a:link
{
background-color: #C0C0C0;
color: #000000;
text-decoration:none;
display:block;
}
.nav .hover
{
background-color: #808080;
color: #0000FF;
text-decoration: none;
display:block;
}
HTML及js代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link href="style/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$(".nav ul li a").each(function () {
if ($($(this))[0].href == String(window.location)) {
$(this).addClass("hover");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="nav">
<ul>
<li><a href="Default.aspx?id=1">显示1</a></li>
<li><a href="Default.aspx?id=2">显示2</a></li>
<li><a href="Default.aspx?id=3">显示3</a></li>
<li><a href="Default.aspx?id=4">显示4</a></li>
<li><a href="Default.aspx?id=5">显示5</a></li>
</ul>
</div>
</form>
</body>
</html>
最终效果图:
jQuery导航菜单防刷新的更多相关文章
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
- 分享14个很酷的jQuery导航菜单插件
导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...
- 这个jQuery导航菜单怎么样
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/39.htm HTML文件代码: <!DOCTYPE html> <html xmlns=& ...
- [Jquery]导航菜单效果-纵向
$( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $ca ...
- 一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
随机推荐
- ☀【Zepto】
http://zeptojs.com/ https://github.com/madrobby/zepto Zepto 中文手册 http://www.360weboy.com/handbook/ze ...
- 处理MVC中默认的Json方法返回时间的问题
利用 Json方法返回 数据时,如果有时间格式,会变成 "\/Date(1369419656217)\/" 这个样子,问了同事找到个解决方法 using Newtonsoft.Js ...
- 一步步写STM32 OS【一】 序言
一直想写个类似uCOS的OS,近段时间考研复习之余忙里偷闲,总算有点成果了.言归正传,我觉得OS最难的部分首先便是上下文切换的问题,他和MCU的架构有关,所以对于不同的MCU,这部分需要移植.一旦这个 ...
- POJ 3169 Layout 差分约束系统
介绍下差分约束系统:就是多个2未知数不等式形如(a-b<=k)的形式 问你有没有解,或者求两个未知数的最大差或者最小差 转化为最短路(或最长路) 1:求最小差的时候,不等式转化为b-a>= ...
- 搭建hdfs服务器集群的搭建+trash
完全分布式搭建需要三台机器:node1.node2和node3 搭建时间之前首先要保持时间一致:date ntpdateyum install ntpdatentpdate -u ntp.sjtu.e ...
- Ganglia系列(一)安装
安装前条件:能够上网,安装了yum 1.系统版本: Red Hat Enterprise Linux Server release 6.3 x86_64位 2.Ganglia版本 ganglia-3. ...
- Eclipse创建Maven Web项目 + 测试覆盖率 + 常见问题(2015.07.14——湛耀)
Eclipse创建Maven web项目: 到此,并没有创建好,接下来一步步解决问题: 问题:无法创建src/main/java目录 解决: 右键项目选择[properties] 点击[OK] 问题: ...
- 创建二叉树,C语言实现
一.前序遍历创建二叉树,使用递归,头文件 BiTree.h /*槽点一:创建树时用scanf输入不成功*/ #ifndef BITREE_H #define BITREE_H #include< ...
- 授权给adfs读取ad 在ad服务器上运行 - setspn 命令 -摘自网络
Because the application pool identity for the AD FS 2.0 AppPool is running as a domain user/service ...
- 常用apt cli
常用的APT命令参数: apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get ...