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 ...
随机推荐
- 【转】Java 内存模型及GC原理
一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- ADO.NET——获取output 和 return值
程序代码 //存储过程 //Create PROCEDURE MYSQL // @a int, // @b int //AS // return @a + @b //GO SqlConnection ...
- 转载-smarty教程(基本语法)
转自:http://hi.baidu.com/qxxgvpdtzhbckpr/item/681049160d7be60db98a1aec 1.smarty的配置 首先,使用smarty第一件 ...
- 浅谈PetShop之使用存储过程与PLSQL批量处理(附案例)
1 大概思路 备注:黄色为影响参数 2 PetShop4的经典数据库连接代码回顾 PetShop4有3个函数,具体有: ExecuteReader:可以读一个表的记录,只能读不 ...
- asp.net基础
这篇主要讲述以下基础知识: Request对象 Response对象 Server对象 Cookie对象 Application对象 ViewState对象 <%%>与<%=%> ...
- Raspberry Pi使用USB摄像头远程监控
用到了开源项目:MJPG-streamer 开源项目的下载地址: http://sourceforge.net/p/mjpg-streamer/code/HEAD/tree/mjpg-streamer ...
- 6个WordPress备份插件
毫无疑问,为了保证网站的数据安全,经常备份是非常有必要的,当然手动备份比较麻烦,所以很多时候我们会使用WordPress的备份插件.Jackie Hole的<6 Top WordPress Ba ...
- Docker系列(三)常用命令
命令说明 docker pull 格式: docke pull [OPTIONS] NAME[:TAG] 作用:下载名称为 name 的镜像 例子: sudo docker pull dl.docke ...
- SignalR Supported Platforms -摘自网络
SignalR is supported under a variety of server and client configurations. In addition, each transpor ...