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 ...
随机推荐
- Matlab工具箱安装体会
总结有两点: 1.如需添加jar包等附加库,可在待安装工具箱下,新建一个java文件夹,并将jar包等文件存放在里面,然后执行以下操作: 1)Create or open your preferenc ...
- 用JavaScript(js)对时间格式化
Date.prototype.format =function(format) { var o = { "M+" : (this.getMo ...
- Sqlite数据库的加密
最近在做一个winform的程序,考虑用Sqlite的数据库,小巧而实用,比Access强多了,不过需要加密,不过free版本没有实现加密,有一些c++的实现:比如:http://www.sqlite ...
- Axis2 WebService(基于REST风格)
http://www.lifeba.org/arch/java_axis2_webservice_rest.html Axis2除了提供传统的webservice方法外,还提供了对Rest的支持.Ax ...
- mysql server install
1.首先在mysql的官网www.mysql.com或者其他网站下载mysql.zip或者mis格式的文件目前5.6的差不多300多M. 2.zip压缩包是绿色版的不用安装,直接用dos命令操作就行. ...
- [codevs3296]有序数组合并
题目描述 Description 合并两个有序数组A和B,使得结果依然有序. 进阶:合并两个有序数组A和B,假设A有n个数,B有m个数,A数组后面还有m个空余空间,需要将结果保存在A中. 请使用O(n ...
- Android强制设置横屏或竖屏
全屏 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 requestWindowFeature(Window.FEATURE_NO_TIT ...
- test-from
title header1 hahhahjl header2 adfkljasd $$a^2$$ point 1 point 2 | table1 | table2 | | ---- | ---- | ...
- HW2.22
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 《Introduction to Algorithm》-chaper30-多项式与快速傅里叶变换
两个n次多项式的相加最直接的方法所需要的时间是O(n),而实现两个n次多项式的乘法的直接方法则需要O(n^2),本章讨论的快速傅里叶变换(FFT),将会将这一过程的时间复杂度降至O(nlogn).同时 ...