Question

我有一个列表（ul），点击后你会被重定向到另一个页面，我想要做的就是当你已经在那个页面上时禁用可点击链接，并且突出显示它。

<div class="selection">
<ul>
  <li><a href="name">Name</a></li>
  <li><a href="comments">Comments</a></li>
</ul>

TYIA！

Answer 1

您可以使用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>

Answer 2

使用jQuery

HTML部分

<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

Answer 3

您可以尝试使用帮助程序，以便在其他部分使用它，因为您需要。

def active_link(text, path)
  class_name = current_page?(path) ? 'active' : nil
  link_to text, path, :class => class_name
end

如果链接与当前页面相同，则会打印一个活动类的链接

active_link 'home', root_path

现在你可以将它与css结合起来，这样你可以在拥有活动类时禁用链接上的点击

a.active {
   pointer-events: none;
   cursor: default;
}

然后使用帮助器打印的所有链接都将具有活动类和css，这样就不会有点击事件。

Answer 4

在查看了你的问题之后，我认为只使用html对你的解决方案最简单的答案可能是删除源页面上的<a>...</a>标记，这样当你在那里时，文本将会显示但不可链接。至于在该页面上突出显示您的文字，请使用<mark>...</mark>作为<li>...</li>的子元素。

一个例子，假设“name”是活动页面：

<div class="selection">
    <ul>
      <li><mark>Name</mark></li>
      <li><a href="comments">Comments</a></li>
    </ul>
</div>

希望这有点帮助。

在页面上已经禁用链接

4 个答案: