Ändern der Farbe von borderBottom an oberster Stelle Adresse

Ich mache ein sehr einfaches Menü für meine Website und ich habe die border-bottom-Eigenschaft verwendet, um die Elemente zu unterstreichen. Was ich möchte, ist die Unterstreichung Rosa, wenn Sie auf einer bestimmten Seite sind. Ich habe benutzerdefinierte "URL" -Elemente und "Link" -Attribute verwendet. Ich würde es so mögen, wenn der Benutzer auf page1 ist, würde das page1 Einzelteil rosa unterstreichen. Hier ist, was ich bisher versucht:Ändern der Farbe von borderBottom an oberster Stelle Adresse

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

^Das völlig falsch war, war ich die Prüfung mit ein wenig Code von W3Schools. ich auch versucht:

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

^Dieser gearbeitet, aber ich hatte „[PAGE NO]“ auf jeder Seite umfassen, so das Skript die IDs der Seite und URL-Elements passen könnte.

Weiß jemand, wie ich das tatsächlich machen kann, ohne in pageID-Tags einfügen zu müssen?

----- ----- Bearbeiten Sorry, ich bin nicht ganz sicher, wie das Problem in Worte zu fassen, aber hier ist die Seite und Quellcode (derzeit):

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>

Quelle

2012-04-01 celliott1997

Welchen Mark-up verwenden Sie? Welche Art von URL verwenden Sie (root-relativ, relativ oder absolut)? –

Leider verstehe ich das Problem nicht, auch nachdem ich es ein paar Mal gelesen habe. Könnten Sie bitte ein vollständiges Code-Snippet bereitstellen? Wie wird MenuCol aufgerufen? Könnten Sie JQuery verwenden? Sie sagen, dass dieses eine funktionierte, aber Sie verwendeten Seitenzahl nicht im bereitgestellten Codefragment. Was meinst du mit URL-Element? – amitamb

TBH, ich habe keine Ahnung. Würde es helfen, wenn ich sage, dass ich eine Subdomain von Webs.com verwende? Liste der URLs, die ich verwenden möchte: http://3659905.webs.com/index.htm, http://3659905.webs.com/Apps/Store.html. – celliott1997

Die beste Vermutung, ich könnte den sparsity von Informationen in der Frage machen, gegeben, ist das:

// 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.

Dieses in seiner aktuellen Inkarnation, funktioniert nur für den Namen der Seite, wenn Sie also mehr index.html Seiten hat, wenn auch in verschiedenen Verzeichnissen, sie würden all aktive Klasse zuweisen (wenn Sie in www.example.com/index.html zur Zeit sind).

Quelle

2012-04-01 17:55:01

Das ist genau was ich brauche. Vielen Dank. – celliott1997

Wie gesagt, wir brauchen mehr Code.

Aber wenn Sie den aktuellen „Seitennamen“ nehmen wollen und die Links erhalten die Seite aus, die Sie dies tun könnten:

//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");

Quelle

2012-04-01 17:54:15

Dies hilft auch. Danke für deine Antwort. – celliott1997

Ändern der Farbe von borderBottom an oberster Stelle Adresse

Antwort

Verwandte Themen