还是求助导航变换背景问题 想做成这个页面的导航效果,http://download.csdn.net/ 就是点击了这个页面的 排行榜 那么新的页面排行榜上就变换,这个点击我通过cookie已经弄出来了,现在还有一个功能就是 输入网址直接打开对应的导航也变换,比如地址栏直接打开http://download.csdn.net/rankings 这个网址,它的排行榜 这个菜单上也和其它不一样,是根据网址来分析吗?这个是不是通过js来完成的,求助怎么做的? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 很多站都可以的啊,你直接打开 http://download.csdn.net/rankings 这个网页 ,它的排行榜和其它菜单样式就不同,或者你再在地址栏输入http://download.csdn.net/help 那打开的页面 帮助菜单就默认选中,怎么做到这样子的,是怎么来判断? 获取当前的url路径location.pathname,然后和导航中的链接匹配,匹配了就设置焦点样式建立1.html,2.html,3.html,4.html文件,内容全部为下面的<div id="dvGuider"><a href="1.html">1.html</a><a href="2.html">2.html</a><a href="3.html">3.html</a><a href="4.html">4.html</a></div><style>a.focus{background:#ff0000;color:#ffffff;}</style><script> var pn = location.pathname; var as = document.getElementById('dvGuider').getElementsByTagName('a'); for (var i = 0, j = as.length; i < j; i++) if (as[i].href.indexOf(pn) != -1) {as[i].className = 'focus';break;}</script> 这个是很简单的,定义一个变量放在导航那里不是用cookie等做的啦比如<a href='index.asp' <%=indexon%>>首页</a><a href='down.asp' <%=downon%>>下载</a><a href='paihang.asp' <%=paihon%>>排行</a>在index.asp,down.asp,paihang.asp,分别定义上面三个变量的值,为空的就不调用了比如indexon=" class=""on""" 是否想这样的效果,可以运行下看效果.<!doctype><html> <head> <meta charset="utf-8"> <style type="text/css"> a.mouseOver { background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ var lis = document.getElementById("links").getElementsByTagName("li"); for (var i = lis.length - 1; i >= 0; i--) { var aE = lis[i].getElementsByTagName("a")[0]; aE.addEventListener("mouseover", changeBackgroud); aE.addEventListener("mouseout", changeBackgroud); } } function changeBackgroud(e){ if (e.type === 'mouseover') { e.target.className = "mouseOver"; } else { e.target.className = ""; } } </script> </head> <body> <ul id="links"> <li> <a href="page1.html">1</a> </li> <li> <a href="page2.html">2</a> </li> <li> <a href="page3.html">3</a> </li> <li> <a href="page4.html">4</a> </li> </ul> </body></html> html<div id="dvGuider"><a href="Untitled-49.html">1.html</a><a href="Untitled-50.html">2.html</a><a href="Untitled-51.html">3.html</a><a href="Untitled-52.html">4.html</a></div><script> var as = document.getElementById('dvGuider').getElementsByTagName('a'); document.getElementById('dvGuider').onclick = function(e) { var e = e || window.event; var current = e.target || e.srcElement; for(var i=0; i<as.length; i++) { as[i].className = ''; } current.className = 'focus'; }</script>cssa.focus{background:#ff0000;color:#ffffff;} Mydate97引用到iframe中出现“不能执行已释放的Script代码”错误,求高手解决,在线等…… 用js获取本页源码、如何保存为本地文本文件? javascript调用外部脚本文件无效 用js与CSS写点击字体弹出div层效果实例? 关于新建窗口问题 帮我把下面的程序改写成javascript,谢了 请问如何使大小写字母的宽度一样宽 setCapture()是否有用? 一个有关IFrame的问题,200分侍候! 应该是有关缓存的问题,我不想回到前n页,但n+1页以前的页面我还要,请问怎么实现…………(急) js屏蔽F5和后退 产生XMLHttpRequest,内存释放问题
<div id="dvGuider">
<a href="1.html">1.html</a>
<a href="2.html">2.html</a>
<a href="3.html">3.html</a>
<a href="4.html">4.html</a>
</div>
<style>
a.focus{background:#ff0000;color:#ffffff;}
</style>
<script>
var pn = location.pathname;
var as = document.getElementById('dvGuider').getElementsByTagName('a');
for (var i = 0, j = as.length; i < j; i++)
if (as[i].href.indexOf(pn) != -1) {as[i].className = 'focus';break;}
</script>
放在导航那里
不是用cookie等做的啦
比如
<a href='index.asp' <%=indexon%>>首页</a>
<a href='down.asp' <%=downon%>>下载</a>
<a href='paihang.asp' <%=paihon%>>排行</a>
在index.asp,down.asp,paihang.asp,分别定义上面三个变量的值,为空的就不调用了
比如indexon=" class=""on"""
<!doctype>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a.mouseOver {
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementById("links").getElementsByTagName("li");
for (var i = lis.length - 1; i >= 0; i--) {
var aE = lis[i].getElementsByTagName("a")[0];
aE.addEventListener("mouseover", changeBackgroud);
aE.addEventListener("mouseout", changeBackgroud);
}
}
function changeBackgroud(e){
if (e.type === 'mouseover') {
e.target.className = "mouseOver";
}
else {
e.target.className = "";
}
}
</script>
</head>
<body>
<ul id="links">
<li>
<a href="page1.html">1</a>
</li>
<li>
<a href="page2.html">2</a>
</li>
<li>
<a href="page3.html">3</a>
</li>
<li>
<a href="page4.html">4</a>
</li>
</ul>
</body>
</html>
<a href="Untitled-49.html">1.html</a>
<a href="Untitled-50.html">2.html</a>
<a href="Untitled-51.html">3.html</a>
<a href="Untitled-52.html">4.html</a>
</div>
<script>
var as = document.getElementById('dvGuider').getElementsByTagName('a');
document.getElementById('dvGuider').onclick = function(e) {
var e = e || window.event;
var current = e.target || e.srcElement;
for(var i=0; i<as.length; i++) {
as[i].className = '';
}
current.className = 'focus';
}</script>cssa.focus{background:#ff0000;color:#ffffff;}