Making links unclickable

[Water]

So, I've got a navigation bar, it works well, changes colour when the mouse hovers over it and when it is the current page.However, one minor problem that still applies with it- the current page is still clickable. Its greyed out so I want it to be converted into just a unclickable button whilst on that particular page.Is there any easy bit of CSS code to null such things?

[Fmdpa]

CSS cannot alter the functionality of elements - it is for styling elements. Is there any reason you can't remove the link on the current page?

[Water]

CSS cannot alter the functionality of elements—it is for styling elements. Is there any reason you can't remove the link on the current page?

Can do. Just seems a bit cooler to do it this way.Also getting rid fo the link and changing it to just text gets rid of all the CSS formatting as well.

[Fmdpa]

I'd recommend doing that, but if you are looking for options here is another one. You could add an ID to the current page link. Then with Javascript, you could prevent that link from working:

<a href="/current.php" id="current">Current Page</a><script>link = document.getElementById('current');link.onclick = function() {	 return false;}</script>

[shadowayex]

Can do. Just seems a bit cooler to do it this way.Also getting rid fo the link and changing it to just text gets rid of all the CSS formatting as well.

You could set the href to either "#" or "java script: void(0);" if you wanted to keep the link but just make sure it doesn't go anywhere.

[Water]

Its weird..I'm not even sure why it isn't working just changing it into text. The CSS just speaks of text, not of links, and lists can be for text just fine normally. hmm

You could set the href to either "#" or "java script: void(0);" if you wanted to keep the link but just make sure it doesn't go anywhere.

that tries to take me to url/java script: void (i.e. page not found error)Also...it still make the mouse hovering over the area turn into a clikable link. Even if it did nothing it spoils the style a little, I want it dead.

[shadowayex]

that tries to take me to url/java script: void (i.e. page not found error)Also...it still make the mouse hovering over the area turn into a clikable link. Even if it did nothing it spoils the style a little, I want it dead.

Hmm, remove the space, so it's

<a href="java script: void(0);">whatever</a>

I don't know why I put a space.Anyway, if you want it to not to hover effects or anything, you're going to need to do more work. Something like

a.disabled:link, a.disabled:visited, a.disabled:hover, a.disabled:active{	// your style}

Should work fine.Edit: It seems this forum put a space in java script for me. Just remove it when you copy it.

[Water]

Ohhhh bum. I was being stupid. deleted the <a href> from before it to make it font but I forgot that I needed the <a> for my css. Gah. Oh well, figured it.Now to try and figure out how to stop the active one highlighting.,

[Water]

And that was elementary too...Note to self: Don't be trying to mess on with anything technical past midnight.Thanks all.

[Fmdpa]

Couldn't you just remove the href attribute? It would disable the link, but the element would remain. It should not affect the styles at all, unless you are targeting a[href] elements, which is unlikely.

[thescientist]

just turn the a for that particular "active" page into a span. (a particular benefit being they're both inline), and if you are somehow targeting the a elements specifically in the CSS, you could just add span to the style definition in the CSS (I'm just assuming your structure):

#menu a, span{  //normal style}#menu a:hover, span{  //hover style}etc

or just add whatever class you have made and put it on the span instead of the a.if that's confusing, just provide a link or code and we can try it out.

[jeffman]

I agree that using JavaScript to remove the href attribute is the simplest solution. In every browser I've tried, this inactivates all pseudo-classes, including :link. You might need to change the className if you have a ruleset for the plain <a> element (without a pseudoclass). That would be a very simple addition. Alternatively, you could change the value of the link's style.color property right in the script and not bother with a separate class.You'll also want an automated system for identifying the correct link. This makes it possible to use the same script in every document without having to customize it for every page. (Maybe you have this already. I don't recall it being mentioned.)I tested this code in IE7-8, Mozilla, Webkit, and Opera:

function disableThisLink () {   var i, myLinks = document.getElementsByTagName('a'), len = myLinks.length;   for(i = 0; i < len; ++i) {	  if (myLinks[i].href == location.href) {		 myLinks[i].removeAttribute("href");		 // myLinks[i].className = "something"; // only if you need it		 break;	  }   }}window.onload = disableThisLink;

Obviously, you're free to execute the function in any way that you want to, as long as the links have already been added to the DOM.