2017-04-21 68 views
0

我有一個列表(ul),當你點擊你將被重定向到另一個頁面時,我想要做的就是禁用可點擊鏈接,當你已經在那個頁面上時,它突出顯示。當頁面上已經禁用鏈接

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

TYIA!

+1

你是否手工編碼這些鏈接?我想你會使用'link_to'。在這種情況下,你可以使用'link_to_unless_current'來做你想做的事情。 – jvillian

回答

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> 
+0

我會試試。謝謝你的推薦:) – Aurb

+1

關於第二條if語句,真的是「(/ name)」還是「(/ comments?)」 – Aurb

+0

ahh。其「/評論」我的不好 –

1

使用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

1

您可以嘗試使用助手,以便您可以在其他部分使用此功能,因爲您需要。

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,這將不會對點擊事件的鏈接

即可。

-1

看完你的問題後,我認爲對於你的解決方案最簡單的答案,而只使用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> 

希望這有助於一點。

相關問題