CODEWITHSUNDEEP
htmlcssruby-on-rails
Aurb
Aurb

Reputation: 15

Disable a link when already on the page

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><a href="name">Name</a></li>
  <li><a href="comments">Comments</a></li>
</ul>

TYIA!

Upvotes: 0

Views: 1639

Answers (4)

Isuru Dilshan
Isuru Dilshan

Reputation: 819

Use jQuery

HTML part

<div class="selection">
<ul id="menu">
  <li><a href="name">Name</a></li>
  <li><a href="comments">Comments</a></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

Upvotes: 1

Deepak Mahakale
Deepak Mahakale

Reputation: 23661

You can make use of current_page? 

<ul>
  <% if current_page?('/name') %>
    <li><strong>Name</strong></li>
  <% else %>
    <li><a href="name">Name</a></li>
  <% end %>
  <% if current_page?('/comments') %>
    <li><strong>Comments</strong></li>
  <% else %>
    <li><a href="comments">Comments</a></li>
  <% end %>
</ul>

Upvotes: 1

bitman
bitman

Reputation: 1

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><a href="comments">Comments</a></li>
    </ul>
</div>

Hope this helps a bit.

Upvotes: -1

xploshioOn
xploshioOn

Reputation: 4115

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.

Upvotes: 1

Related Questions