在頂部位置地址上更改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的顏色

回答

相關問題