Home/ Questions/Q 7749849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:08:24+00:00

I’m making a very basic menu for my site and I have used the

  • 0

I’m making a very basic menu for my site and I have used the border-bottom property to underline the items. What I want is to highlight the underline pink if you’re on a certain page. I’ve used custom “url” elements and “link” attributes. I would like it so if the user is on page1 the page1 item would underline pink. Here’s what I’ve tried so far:

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

^ That was completely wrong, I was testing with a bit of code from W3Schools.
I also tried:

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

^ This one worked but I had to include “[PAGE NO]” on every page so the script could match the IDs of the page and URL element.

Does anyone know how I can actually make this work without having to put in pageID tags in?

—– Edit —–
Sorry, I’m not exactly sure how to put the problem into words but here’s the page and source code (currently):

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best guess I could make, given the sparsity of information in the question, is this:

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

    This, in its current incarnation, works only for the name of the page, so if you had multiple index.html pages, albeit in different directories, they would all assign the active class (if you were currently in www.example.com/index.html).

    • 0