在顶部位置地址上更改borderBottom的颜色

我正在为我的网站制作一个非常基本的菜单，并且我使用了border-bottom属性来强调这些项目。我想要的是突出显示下划线粉红色，如果你在某个页面上。我使用了自定义的“url”元素和“链接”属性。我喜欢它，所以如果用户在第1页上，page1项目会突出显示粉红色。这是我迄今试过的：在顶部位置地址上更改borderBottom的颜色

<script> 
function col(){if(top.location.href==document.getElementsByTagName("url")[1].link){this.style.borderBottom="solid #F05";};} 
</script>

^这是完全错误的，我正在测试一些W3Schools的代码。我也试过：

<script> 
function menuCol(url){if(top.location == url){this.style.borderBottom="solid #F05";};} 
</script>

^这一个工作，但我必须包括在每一页上“[PAGE NO]”中的脚本，可以匹配的页面和URL元素的ID。

有没有人知道我怎么能实际上使这项工作，而不必在pageID标签中？

----- -----编辑对不起，我不完全知道如何把问题分解成词，但这里是（目前）的页面和源代码：

http://3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm

<head> 
<title>Menu</title> 

<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/bar_sidegrey.js"></script> 

<script> 
$(document).ready(function(){ 
$("url").click(function(){ 
top.location.href="http://"+$(this).attr("link") 
}); 
}); 
</script> 

<script> 
function col(){if(top.location.href==document.getElementsByTagName("url")[1].link){this.style.borderBottom="solid #F05";};} 
</script> 

<style> 
url{text-decoration:none;font-size:15px;padding:3px;border-bottom:solid #AAA;} 
url:hover{cursor:pointer;border-bottom:solid #FFF} 

body{background:black;color:white;font-family:arial;cursor:default;} 
</style> 
</head> 



<body onselectstart="return false;" oncontextmenu="return false;" onload="col();"> 
<center> 

<url link="3s.uk.to">Home</url> 
<url link="3apps.uk.to">App Store</url> 
<url link="3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm">Menu Test</url> 

</center> 
</body>

来源

2012-04-01 celliott1997

你使用什么标记？你使用什么类型的URL（相对，相对或绝对）？ – 2012-04-01 17:43:18

不幸的是，即使阅读了几次，我也不明白这个问题。你能否提供完整的代码片段？ menuCol如何被调用？你可以使用JQuery吗？你说这个工作正常，但你没有在提供的代码片段中使用页码。你是什么意思的URL元素？ – amitamb 2012-04-01 17:48:43

TBH，我不知道。如果我说我在使用Webs.com子域名会有帮助吗？我想要使用的网址列表：http://3659905.webs.com/index.htm，http://3659905.webs.com/Apps/Store.html。 – celliott1997 2012-04-01 17:50:51

最合理的猜测，我可以做，给的信息问题的稀疏性，是这样的：

// in real life, use: 
// var url = window.location; 
var url = "http://some.domain.com/index.html"; 

function markActive(elem) { 
    if (url.indexOf(elem.href.split('/').pop()) > -1) { 
     return 'active' 
    } 
} 

var as = document.getElementsByTagName('a'); 
for (var i=0,len=as.length; i<len; i++){ 
    as[i].className = markActive(as[i]); 
}

JS Fiddle demo。

这在目前的版本中仅适用于页面的名称，所以如果您有多个index.html页面，虽然位于不同的目录中，但它们都将分配活动类别（如果您当前处于www.example.com/index.html）。

来源

2012-04-01 17:55:01

这正是我需要的。谢谢。 – celliott1997 2012-04-01 18:01:42

正如他们所说，我们需要更多的代码。

但是，如果你想利用当前的“页面名称”，并获得一个包含该页面你可以这样做的链接：

//get current adress 
var URL = window.location.pathname; 
//get the filename with extension 
var PageName = URL.substring(URL.lastIndexOf('/') + 1); 
//use jquery to find links pointing to the file 
$('#YOURMENU a[href='+PageName+']').css("border-bottom-color", "#F05");

来源

2012-04-01 17:54:15

这也有帮助。感谢您的回答。 – celliott1997 2012-04-01 18:04:30

在顶部位置地址上更改borderBottom的颜色

回答

相关问题