<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery智能判断是否是当前导航并加标记</title>
<script src="http://www.webdm.cn/themes/script/jquery.js" type="text/javascript"></script>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd
{
padding: 0;
margin: 0;
}
li
{
list-style: none;
}
img
{
border: none;
}
em
{
font-style: normal;
}
a
{
color: #555;
text-decoration: none;
outline: none;
blr: this.onFocus=this.blur();
}
a:hover
{
color: #000;
text-decoration: underline;
}
body
{
font-size: 12px;
font-family: Arial,Verdana, Helvetica, sans-serif;
word-break: break-all;
word-wrap: break-word;
}
.clear
{
height: 0;
overflow: hidden;
clear: both;
}
.nav
{
width: 950px;
height: 29px;
margin: 20px auto 0;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -180px;
position: relative;
}
.navl
{
position: absolute;
left: 0;
width: 3px;
height: 29px;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat 0 -150px;
}
.navr
{
position: absolute;
right: 0;
width: 3px;
height: 29px;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -150px;
}
.nav ul
{
margin-left: 10px;
}
.nav ul li
{
float: left;
line-height: 29px;
display: inline;
text-align: center;
padding-left: 5px;
font-size: 14px;
font-weight: bold;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -208px;
}
.nav ul li a
{
float: left;
color: #FFF;
padding: 0 10px;
}
.nav ul li.select
{
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -240px;
position: relative;
margin-top: -4px;
}
.nav ul li.select a
{
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x right -240px;
height: 33px;
line-height: 33px;
color: #333;
text-indent: -3px;
}
</style>
<script type="text/javascript">
// nav
$(function shownav() {
var a1 = window.location.href;
var a2 = $(".nav ul li");
var strs = new Array();
strs = a1.split("/");
for (var i = 0; i < a2.length; i++) {
if ($(a2[i]).children().attr("href") == strs[(strs.length) - 1]) {
$(a2[i]).addClass("select");
return;
}
}
});
//或者
$(document).ready(function () {
$(".nav ul li").each(function (index) {
var strs = new Array();
strs = window.location.href.split("/");
var http = strs[(strs.length) - 1];
var liValue = $(".nav ul li").eq(index).children().attr("href").substr(0, 4);
if (http.indexOf(liValue) >= 0) {
$(".nav ul li").removeClass("select");
$(".nav ul li").eq(index).addClass("select");
}
$(this).click(function () {
$(".nav ul li").removeClass("select");
$(".nav ul li").eq(index).addClass("select");
});
});
});
</script>
</head>
<body>
<div class="nav">
<em class="navl"></em><em class="navr"></em>
<ul>
<li><a href="nav.html">首 页</a></li>
<li><a href="nav2.html">手机卖场</a></li>
<li><a href="nav3.html">数码天下</a></li>
<li><a href="nav4.html">时尚女人</a></li>
<li><a href="nav5.html">家居装饰</a></li>
</ul>
</div>
<br />
</body>
</html>
网上的都是不能用的，我又修改了一下，可以用的
相关推荐
此外，HTML文件（如`说明.htm`）会包含结构化的导航菜单标记，如`<ul>`和`<li>`元素，这些元素将被jQuery和CSS选中并应用样式和行为。`jiaoben1892`可能是一个JavaScript文件，其中包含了实现旋转导航的jQuery代码...
本文将深入探讨如何使用jQuery技术来创建一个具有浮动效果和锚点导航功能的顶部菜单，并实现当页面滚动到特定内容区域时，菜单中的相应链接自动获得选中状态，提供更友好的用户体验。 首先，我们需要理解锚点导航的...
《jQuery智能导航特效详解》 在网页设计与开发中，导航栏是不可或缺的一部分，它为用户提供了一种方便快捷的方式去浏览网站的各个部分。而利用jQuery实现的智能导航特效，可以提升用户体验，使得导航更加直观、动态...
在这个案例中，我们将使用jQuery来检测当前页面URL，并根据URL匹配导航链接，从而对当前页面的导航项进行高亮。 1. **HTML 结构**： 在`index.html`文件中，我们创建一个包含多个链接的导航条。每个链接对应网站的...
jQuery，作为一款强大的JavaScript库，为实现智能导航定位提供了丰富的功能和简便的API。本文将深入探讨如何利用jQuery来创建高效、响应式的导航系统。 首先，我们需要了解jQuery的基本用法。jQuery通过其简洁的...
"jQuery自适应宽度背景跟随滑动导航"就是这样一个解决方案，它结合了jQuery库的动态效果与自适应布局的特点，使得背景图像能够随着导航条的滑动而平滑地跟随移动，为用户带来更加沉浸式的浏览体验。 首先，jQuery是...
【jQuery仿淘宝顶部导航菜单】是一种常见的网页设计技术，它主要使用JavaScript库jQuery来实现类似淘宝网站顶部导航栏的交互效果。这个项目旨在提供一种高效、动态且用户体验良好的导航菜单解决方案，让访客能够轻松...
本文将深入探讨如何利用jQuery实现平面图区域标记，这在数据可视化、地图标注或交互式图表中非常常见。我们将讨论以下几个关键知识点： 1. **jQuery基础**：首先，你需要对jQuery的基本用法有一定的了解，包括选择...
下面是一个简单的示例，展示如何使用jQuery判断单选按钮是否被选中并获取选中值： ```javascript // 获取所有同名的单选按钮 var radioButtons = $('input[name="yourRadioGroupName"]'); // 检查是否至少有一个被...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
本话题聚焦于“jquery判断360浏览器”，这是一个常见的需求，因为不同的浏览器可能会有不同的行为，开发者需要针对特定浏览器进行优化或提供兼容性解决方案。 首先，我们来探讨如何使用jQuery来检测用户是否正在...
【jQuery魅族官网导航加幻灯片代码】是一款基于JavaScript库jQuery实现的网页导航栏与幻灯片展示功能的代码示例。这个代码主要用于模仿魅族手机官网首页的设计，为用户提供一个具有动态效果的导航菜单和自动轮播的...
《jQuery Spinner：构建数字智能加减插件的深入解析》 在Web开发中，用户界面的交互性至关重要，而数字输入框（Spinner）是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字，...
总的来说，jQuery结合CSS的`position: fixed`特性，可以方便地实现页面滚动时元素的智能定位，使得诸如导航栏这样的关键信息始终可见，增强用户的互动性和页面的易用性。实践中要注意适配不同的设备和屏幕尺寸，确保...
3. **jQuery 实现**：在页面加载完成后，我们需要监听滚动事件，判断导航栏是否需要变为悬浮状态。以下是一个简单的实现示例： ```javascript $(document).ready(function() { var nav = $('#sticky-nav'); var ...
3. **判断条件**：在滚动事件的回调函数内，我们需要设置一个判断条件，检查导航栏是否应该悬浮。这通常通过比较导航栏的顶部距离与页面的滚动顶部距离来实现。如果导航栏的顶部距离小于某个阈值，说明导航栏已经...
本文将深入探讨jQuery实现的后台左侧三级导航菜单的原理和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富...
以前一直困惑我的一个问题就是：怎么实现给当前页面导航菜单一个样式？ 最最开始的时候用的是最笨的方法，就是每个导航页面都写得不一样。比方说index.html页面的时候，会在index导航的a标签一个.active样式，然后...