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 ...
随机推荐
- Struts 2.3.1.1 命令执行漏洞
漏洞版本: Struts 2.3.1.1 漏洞描述: CVE ID:CVE-2011-3923 Struts2的核心使用的是WebWork框架,而WebWork通过XWork来处理用户的请求参数.Xw ...
- oracle rac scan ip 用途 原理
Oracle 11G R2 RAC增加了scan ip功能,在11.2之前,client链接数据库的时候要用vip,假如你的cluster有4个节点,那么客户端的tnsnames.ora中就对应有四个 ...
- 【转】Android source build/envsetup.sh学习笔记
原文网址:http://blog.csdn.net/mliubing2532/article/details/7567164 如果你只需要修改某一个模块的内容,但是却每次都要执行make, 最后等待很 ...
- 在 ASP.NET MVC Web 应用程序中输出 RSS Feeds
RSS全称Really Simple Syndication.一些更新频率较高的网站可以通过RSS让订阅者快速获取更新信息.RSS文档需遵守XML规范的,其中必需包含标题.链接.描述信息,还可以包含发 ...
- ArrayList源码解析
ArrayList简介 ArrayList定义 1 public class ArrayList<E> extends AbstractList<E> implements L ...
- 使用Spring MVC 的表单控制器SimpleFormController
以注册过程为例,我们可能会选择继承AbstractController来实现表单的显示,继承AbstractCommandController来实现表单的处理 ,这样是可行的,但必须要维护两个控制器 ...
- BP神经网络模型及算法推导
一,什么是BP "BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学家小组提出,是一种按误差逆传播算法训练的多层前馈网络,是目前应用最 ...
- Linux下platform设备以及platform设备和驱动注册的先后顺序
platform是Linux系统提供的一种管理设备的手段,所有SOC系统中集成的独立的外设控制器.挂接在SOC内存空间的外设等都属Platform设备.如ARM S3C6410处理器中,把内部集成的I ...
- CF_402C Searching for Graph 乱搞题
题目链接:http://codeforces.com/problemset/problem/402/C /**算法分析: 乱搞题,不明白题目想考什么 */ #include<bits/stdc+ ...
- Weblogic 集群部署说明 --转
代理web.xml 设置 <servlet> l <servlet-name>HttpClusterServlet</servlet-nam ...