请教 jquery 实现高亮当前导航
时间:2010-01-07
来源:互联网
点击导航的某个标签a连接到b页面,b页面的导航标签a就会高亮,这种效果改怎么实现。在网络上找了好久,都没找到,刚学jquery,自己还不会写 ,在这里请高手指点下。( 这种效果常见于 商城网站)
作者: grchao 发布时间: 2010-01-07
两种方式实现:
1. 静态的,直接把b页面的a标签高亮
2. 动态的,从后台取得标志页面的信息,高亮相应的标签。
1. 静态的,直接把b页面的a标签高亮
2. 动态的,从后台取得标志页面的信息,高亮相应的标签。
作者: jorneyr 发布时间: 2010-01-07
$(function shownav(){
var a1 = document.URL;
var a2 = $(".nav ul li");
for(var i=0;i<a2.length;i++){
if(a2 == a1){
$(a2).addClass("select");
return;
}
}
$(a2[0]).addClass("select");
})
var a1 = document.URL;
var a2 = $(".nav ul li");
for(var i=0;i<a2.length;i++){
if(a2 == a1){
$(a2).addClass("select");
return;
}
}
$(a2[0]).addClass("select");
})
作者: raceman 发布时间: 2010-01-08
感谢2楼的代码。
我刚才测试了下,不能达到效果。不知道为什么。
<script>
$(function shownav(){
var a1 = document.URL;
var a2 = $(".nav ul li");
for(var i=0;i<a2.length;i++){
if(a2 == a1){
$(a2).addClass("select");
return;
}
}
$(a2[0]).addClass("select");
})
</script>
<div class="nav">
<ul>
<li><a href="index.asp">首 页</a></li>
<li><a href="sj.asp">手机卖场</a></li>
<li><a href="sm.asp">数码天下</a></li>
<li><a href="#">时尚女人</a></li>
<li><a href="#">家居装饰</a></li>
</ul>
</div>
上面代码,我放在一个公共文件top.asp内。在index sj.asp sm.asp上调用top.asp文件。测试的时候不能实现效果,高手路过指点下。
我刚才测试了下,不能达到效果。不知道为什么。
<script>
$(function shownav(){
var a1 = document.URL;
var a2 = $(".nav ul li");
for(var i=0;i<a2.length;i++){
if(a2 == a1){
$(a2).addClass("select");
return;
}
}
$(a2[0]).addClass("select");
})
</script>
<div class="nav">
<ul>
<li><a href="index.asp">首 页</a></li>
<li><a href="sj.asp">手机卖场</a></li>
<li><a href="sm.asp">数码天下</a></li>
<li><a href="#">时尚女人</a></li>
<li><a href="#">家居装饰</a></li>
</ul>
</div>
上面代码,我放在一个公共文件top.asp内。在index sj.asp sm.asp上调用top.asp文件。测试的时候不能实现效果,高手路过指点下。
作者: grchao 发布时间: 2010-01-08
$(function(){
$(".nav ul li").click(function(){
$(".nav ul li").css("background-color","white");
$(this).css("background-color","red");
var hre=$(this).children().text();
if(hre=="数码天下")
{
$(".con").load("WebForm.aspx");
}
});
})
</script>
<div class="nav">
<ul>
<li><a href="index.aspx" title="1">首 页</a></li>
<li><a href="#" title="2">手机卖场</a></li>
<li><a href="#">数码天下</a></li>
<li><a href="#">时尚女人</a></li>
<li><a href="#">家居装饰</a></li>
</ul>
</div>
$(".nav ul li").click(function(){
$(".nav ul li").css("background-color","white");
$(this).css("background-color","red");
var hre=$(this).children().text();
if(hre=="数码天下")
{
$(".con").load("WebForm.aspx");
}
});
})
</script>
<div class="nav">
<ul>
<li><a href="index.aspx" title="1">首 页</a></li>
<li><a href="#" title="2">手机卖场</a></li>
<li><a href="#">数码天下</a></li>
<li><a href="#">时尚女人</a></li>
<li><a href="#">家居装饰</a></li>
</ul>
</div>
作者: jxxjyb 发布时间: 2010-01-11
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28