CSS使用現有代碼製作活動狀態導航元素

夥計們我正在處理另一個人的代碼，並想知道如何讓有問題的導航欄顯示「活動狀態」。換句話說，如何讓該頁面上的導航項目處於活動狀態並顯示不同的bg顏色/文本顏色？這裏是CSS和HTML，這很簡單，我知道......但我無法弄清楚如何讓這個活動狀態起作用。CSS使用現有代碼製作活動狀態導航元素

CSS：

.menu {width:100%; margin:0; padding:0;} 
.menu a.menuitem { 
    font-size: 10px; 
    font-weight: bold; 
    color: #a7a7a7; 
    display: block; 
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ 
    width: auto; 
    border-bottom: 1px solid #ffffff; 
    margin: 0; 
    padding: 4px 10px 4px 10px; 
    text-decoration: none; 
} 
.menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;} 




.menu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/position:absolute; top:5px; right:5px; border: none;} 
.menu a.menuitem:hover { 
    background: #6dd0f7; 
    color: #fff; 
    text-decoration: none; 
} 


.menu div.submenu { /*DIV that contains each sub menu*/ width:auto; margin:0; padding:0;} 

.menu div.submenu ul { /*UL of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;} 

.menu div.submenu ul li{border-bottom:1px solid #AFAFAF; line-height:12px; margin:0; padding:0;} 

.menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;} 

.menu div.submenu ul li a:link {color:#383838; text-decoration:none;} 

.menu div.submenu ul li a:visited {color:#383838; text-decoration:none;} 

.menu div.submenu ul li a:active {background:#D7EEFF; color:#0164B5; text-decoration:none;} 

.menu div.submenu ul li a:hover {background:#D7EEFF; color:#0164B5; text-decoration:none;} 


HTML: 

     <div class="menu"> 
      <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a> 
      <a class="menuitem submenuheader" href="">Messages (241)</a> 
      <a class="menuitem submenuheader" href="">Account Settings</a> 
      <a class="menuitem submenuheader" href="">Fees & Activities</a> 
      <a class="menuitem submenuheader" href="">Notifications</a> 
      <a class="menuitem submenuheader" href="">Contact Support</a> 
      </div>

來源

2013-02-11 designer

'：active'只是中期單擊狀態。如果你想設置當前頁面的導航項目，你必須設置一些方法來做到這一點（通常通過添加你自己的.active類或其他），或者如果你使用CMS，可能有一些集成活動類。 – Chad 2013-02-11 19:37:07

的:active CSS選擇器選擇鏈接只有當你點擊它（鼠標按下）。見here。

要以另一種方式顯示當前頁面的導航項目，您需要向該鏈接添加一個額外的類，並將樣式定義添加到該類中。例如：

<a class="menuitem submenuheader active" href="">Messages (241)</a>

和風格它與：

.menu a.active { /* your definitions */ }

來源

2013-02-11 19:39:03 bpoiss

非常感謝！將很快測試 – designer 2013-02-11 19:42:59

不錯，它的工作，但我似乎無法覆蓋從這裏現有的'visited'鏈接顏色....菜單a.menuitem：visited，.menu .menuitem：active {color：＃9ca1a6; text-decoration：none;}我如何使JUST活動狀態成爲白色文本而不影響訪問部分？ – designer 2013-02-11 19:47:25

.menu a.active {color：white！important; } – bpoiss 2013-02-11 19:48:55

創建一個「當前」級並將其設置爲當前正在顯示的元件。

範例CSS

div.menu a.current { 
    color: #fff !important; 
    text-decoration: none; 
    background: #6dd0f7; 
}

HTML

<div class="menu"> 
      <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a> 
      <a class="menuitem submenuheader current" href="">Messages (241)</a> 
      <a class="menuitem submenuheader" href="" class="current">Account Settings</a> 
      <a class="menuitem submenuheader" href="">Fees & Activities</a> 
      <a class="menuitem submenuheader" href="">Notifications</a> 
      <a class="menuitem submenuheader" href="">Contact Support</a> 
</div>

的jsfiddle：http://jsfiddle.net/XcmaD/

來源

2013-02-11 19:40:35 estrar

hmn雅沒有工作。需要應用它，比如說，這一個... My Store Profile – designer 2013-02-11 19:53:14

需要這種風格的'你在這個頁面上，這不會改變，直到你離開'看... \t背景：＃6dd0f7; \t color：#ffffff; \t text-decoration：none; – designer 2013-02-11 19:54:07

然後這就是'My Store Profile'與上面指定的CSS。 – estrar 2013-02-11 19:57:47

CSS使用現有代碼製作活動狀態導航元素

回答

相關問題