Disable a link when already on the page - html

Question

I have a list(ul) which when click you will be redirected to another page, what I want to do is disable the clickable link when you are already on that page and also, have it highlighted.
<div class="selection">
<ul>
<li>Name</li>
<li>Comments</li>
</ul>
TYIA!

Answer 1

You can try with a helper so you can use this on other parts, because you will need to.
def active_link(text, path)
class_name = current_page?(path) ? 'active' : nil
link_to text, path, :class => class_name
end
this will print a link with the class active if the link it's the same as the current page
active_link 'home', root_path
Now you can combine this with css so you can disable the click on the link when this have the active class
a.active {
pointer-events: none;
cursor: default;
}
then with this all the links that you print with the helper will have the active class and with the css, this wouldn't have events on the click.

Answer 2

You can make use of current_page?
<ul>
<% if current_page?('/name') %>
<li><strong>Name</strong></li>
<% else %>
<li>Name</li>
<% end %>
<% if current_page?('/comments') %>
<li><strong>Comments</strong></li>
<% else %>
<li>Comments</li>
<% end %>
</ul>

Answer 3

Use jQuery
HTML part
<div class="selection">
<ul id="menu">
<li>Name</li>
<li>Comments</li>
</ul>
jQuery
$(document).ready(function () {
$("#menu a").each(function(){
//set all menu items to 'black
$(this).css("color","black");
var linkPath=$(this).attr("href");
var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');
//set the <a> with the same path as the current address to blue
if(linkPath==relativePath)
$(this).css("color","blue");
});
});
enter link description here

Answer 4

after looking at your question, I think that the simplest answer to your solution while only utilizing html may be to get rid of the <a>...</a> tag on the source page so that when you're there, the text will show but is not linkable. As for having your text highlighted while on that page, use <mark>...</mark> as a child element of <li>...</li>.
An example, assuming that "name" is the active page:
<div class="selection">
<ul>
<li><mark>Name</mark></li>
<li>Comments</li>
</ul>
</div>
Hope this helps a bit.