使點擊的鏈接顏色保持原狀

我一直試圖使鏈接被點擊時，顏色停留在那裏，不僅僅當鼠標點擊鏈接時（如果鼠標失去焦點在鏈接上，顏色會恢復到正常狀態）。使點擊的鏈接顏色保持原狀

像這個網站當你想問這個問題，顏色停留在問問題標籤。

這裏是的jsfiddle代碼示例，我想：

HTML

<ul id="parentExample" style="display: block;"> 
    <asp:Repeater runat="server" ID="uiMenuList"> 
    <ItemTemplate> 
     <li id="childExample"> 
     <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">First Menu</a> 
     <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">Second Menu</a> 
     <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">Third Menu</a> 
     </li> 
    </ItemTemplate> 
    </asp:Repeater> 
</ul>

的JavaScript

$(document.ready(function() { 
    var $h3s = $('li').click(function() { 
    $h3s.removeClass('active'); 
    $(this).addClass('active'); 
    }); 
}));

CSS

.active { 
    background: none; 
    color: #FFC000; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a { 
    background: none; 
    color: black; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:hover { 
    background: none; 
    color: red; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:active { 
    background: none; 
    color: #FFC000; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:selected { 
    background: none; 
    color: #FFC000; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
}

這裏是上面代碼的例子： JS Fiddle

任何幫助，將不勝感激

感謝

來源

2016-02-18 Reinhardt

你的設置不正確。你的代碼應該是$（function（）{ var $ h3s = $（'li'）。click（function（）{console.log（$ h3s）; $ h3s.removeClass（'active'）; $（this）.addClass（'active'）; }）; }）; '並設置網站加載jQuery。 –

你應該給!important，只要你想使用class在id覆蓋CSS。
因爲id有更多specificity比class

.active { 
    background: none !important; 
    color: #FFC000 !important; 
    border: 0px !important; 
    margin-top: -3px !important; 
    margin-right: auto !important; 
    margin-left: auto !important; 
}

而且你不能使用$h3變量這樣做單擊事件。

而你應該添加和移除類到錨點標記。

如果你想使用變量，那麼你可以使用像以下：

var h3s = $('li a'); 
    $('li a').click(function() { 
    h3s.removeClass('active'); 
    $(this).addClass('active'); 
    });

而且不要忘了，包括jQuery插件。

Working Fiddle

來源

2016-02-18 10:25:32 ketan

@ketan你提到了特異性，並提供了'！important'作爲解決方案，這似乎是錯誤的。 @Fuhans，你應該嘗試使用更少的ID選擇器爲你的風格和更多的類。完全是因爲它們不太具體，並且更易於覆蓋。另外，爲像'.active'這樣的通用類添加'！important'將會讓你的生活變得更加困難，因爲它的特殊性。 –

嘗試這種方式

$(document).ready(function() { 
    $('li a').click(function() { 
    $('li a').removeClass('active'); 
    $(this).addClass('active'); 
    }); 
});

改變你的CSS的階級立場。

像

#parentExample li#childExample a { 
    background: none; 
    color: black; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:hover { 
    background: none; 
    color: red; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:active { 
    background: none; 
    color: #FFC000; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a:selected { 
    background: none; 
    color: #FFC000; 
    border: 0px; 
    margin-top: -3px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#parentExample li#childExample a.active { 
     background: none; 
     color: #FFC000; 
     border: 0px; 
     margin-top: -3px; 
     margin-right: auto; 
     margin-left: auto; 
    }

https://jsfiddle.net/mzwwrsca/3/

來源

2016-02-18 10:15:50

嗨，即使我已經嘗試過這種解決方案，它沒有工作，接受的答案是適合我的。無論如何感謝 – Reinhardt

爲什麼使用重要。 –

使點擊的鏈接顏色保持原狀

回答

相關問題