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 ...
随机推荐
- Linux Kernel ‘mp_get_count()’函数本地信息泄露漏洞
漏洞名称: Linux Kernel ‘mp_get_count()’函数本地信息泄露漏洞 CNNVD编号: CNNVD-201311-054 发布时间: 2013-11-06 更新时间: 2013- ...
- MS dos版本
1981年,MS-DOS 1.0发行,作为IBM PC的操作系统进行捆绑发售,支持16k内存及160k的5寸软盘.在硬件昂贵,操作系统基本属于送硬件奉送的年代,谁也没能想到,微软公司竟会从这个不起眼的 ...
- javascript中的 && 与 || 的运用
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a a || b : 将a, b转换为Boolean类型, 再执行逻辑或, tr ...
- linux中cat more less head tail 命令区别
1.cat 显示文件连接文件内容的工具: cat 是一个文本文件查看和连接工具.查看一个文件的内容,用cat比较简单,就是cat 后面直接接文件名. 比如:[root@localhost ~]# ca ...
- RESTLET开发实例(三)基于spring的REST服务
http://www.lifeba.org/arch/restlet_spring_3.html 前面两篇文章,我们介绍了基于JAX-RS的REST服务以及Application的Rest服务.这里将 ...
- CodeForces 368B Sereja and Suffixes
题意:给你一个序列,问你从l位置到结尾有多少个不同的数字. 水题,设dp[i]表示从i位置到结尾不同数字的个数,那么dp[i] = dp[i+1] + (vis[a[i]] == 0),在O(n)时间 ...
- HW5.3
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- java 访问权限控制
java提供四种访问权限: public > protected > 包访问权限(无关键词) > private 包:库单元 对于包访问权限,一个包内的都可以访问. 在eclipse ...
- PC-计算机动行命令里的密密!系统管理程序!
1. gpedit.msc-----组策略 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器 5. logoff---------注销 ...
- hdoj 3549 Flow Problem【网络流最大流入门】
Flow Problem Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tota ...