主動錨定標記背景顏色

我有jsp頁面建立與struts2瓷磚有左手邊的垂直菜單。選擇菜單後，我想將所選菜單的背景色背景保持爲白色。這個動作會讓笑臉選擇標籤。我已經搜索瞭解決方案，但沒有運氣。該效果適用於懸停動作，但背景顏色不一致。主動錨定標記背景顏色

下面是我的CSS與CSS的代碼。

ul.v_menu li a 
{ 
display: block; 
padding: 10px 20px; 
text-decoration: none; 
white-space: nowrap; 
text-align:left;  
color: #fff; 
} 
ul.v_menu li a:hover,ul.v_menu li a.active 
{ 
color:black; 
background: white; 
}

HTML

<ul class="v_menu"> 

     <li><a href="#">DashBoard</a></li> 
     <li><tags:a action="viewIncomeGrid">Income</tags:a></li> 
     <li><a href="#">Expense</a></li> 
     <li><a href="#">Category</a></li> 
     <li><a href="#">Payee</a></li> 
    </ul>

瓷磚：

<definition name="myBaseLayout" template="/MyBaseLayout.jsp"> 
     <put-attribute name="title" value="M-Manager"/> 
     <put-attribute name="headerMenu" value="/Banner.jsp"/> 
     <put-attribute name="vMenu" value="/vMenu.jsp"/> 
     <put-attribute name="body" value="/Body.jsp"/> 
     <put-attribute name="footer" value="/Footer.jsp"/> 
    </definition>

所需的行爲正在對<li><a href="#">DashBoard</a></li>菜單項，因爲沒有行動映射到這個錨標籤。但是，如果我們將任何動作映射到鏈接，並且點擊鏈接後整個頁面都會刷新，右側身體部分具有所需的頁面，但左側菜單中我設置了懸停，活動，焦點行爲無論是由CSS或由jQuery正在迷失。如何解決這個問題？

來源

2015-12-27 Ghost Rider

你的意思是這樣的https://jsfiddle.net/gdgjpv0b/ –

你必須給選定的菜單項像「active」這樣的類，並像你想要的樣式。當你點擊一個菜單項時，你需要從之前選擇的項目中刪除活動的類，並將其提供給新項目。如果你的頁面有多個html/php/..文件，這將是沒有問題的。否則，你需要一些JavaScript代碼，如果你需要類似標籤的東西。 – herrh

@NenadVracar：是的。但正如我所說我正在使用瓷磚。所以當我選擇菜單項時，右側部分（BODY）被其他頁面填滿，結果主動效果（背景：白色）正在消失。這是我的問題 –

找到工作fiddel：https://jsfiddle.net/s8hLsogc/

我添加一些棘手的選擇，以抓住每一個想在LIS像這樣：

li:hover *

來源

2015-12-27 13:58:12

正如Nenad Vracar提到https://jsfiddle.net/gdgjpv0b/ 是我正在尋找的。但是由於瓷磚的影響，根據我的理解，這種效應會逐漸喪失。 –

http://www.w3schools.com/cssref/sel_active.asp

ul.v_menu li a:active 
    { 
     color:black; 
     background: white; 
    }

來源

2015-12-28 07:10:07

如果您看到我的代碼，我使用的是相同的代碼，但所需的行爲不起作用，正如我在之前的評論中提到的那樣 –

您正在使用：Active和我正在使用：Focus，如果您看到我的代碼高於 –

是的，我同意..但我也嘗試了重點，根據用戶Nenad Vracar的建議（我的文章的第一評論）。它仍然沒有工作。 –

請檢查此琴：https://jsfiddle.net/panks_josh/1gxq8se6/

ul.v_menu li a { 
    display: block; 
    padding: 10px 20px; 
    text-decoration: none; 
    white-space: nowrap; 
    text-align: left; 
    color: #fff; 
} 
ul.v_menu li a:hover { 
    color: white; 
    background: black; 
} 
ul.v_menu li a:focus { 
    color: white; 
    background: black; 
}

請使用此：重點而不是：主動,,肯定會工作。

來源

2016-01-02 10:08:17

主動錨定標記背景顏色

回答

相關問題