突出顯示導航中的活動標籤

我想突出顯示標籤導航站點中的活動標籤。這是製表符的html代碼片段。突出顯示導航中的活動標籤

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Title here</title> 
<link href="style.css" media="all" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
.auto-style1 { 
     font-size: medium; 
} 
</style> 
</head> 

<body> 

<div id="container"> 
    <div id="navigation">      
     <ul> 
      <li class="link"><a href="default.html" title="Product">Home</a></li> 
      <li class="link"><a href="Research.html" title="Product">Research</a></li>  
      <li class="link"><a href="Teaching.html" title="Progress">Teaching</a></li> 
      <li class="link"><a href="about.html" title="About">Contact</a></li> 
      <li class="link"><a href="CV.html" title="CV">CV</a></li> 
     </ul> 
    </div>

這是我的樣式表

/* --------------------------------------------- RESET */ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; font-weight: normal;} 
body { margin: 0pt;} 
ol, ul { list-style-type: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
:focus { outline: 0; } 
ins { text-decoration: none; } 
del { text-decoration: line-through; } 
/* tables still need 'cellspacing="0"' in the markup */ 
table { border-collapse: collapse; border-spacing: 0; } 

/* --------------------------------------------- STRUCTURE STYLES */ 
body { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     background: url('bg.jpg') repeat-x top left #f0f0f0; 
} 

#container { 
     width: 960px; 
     height: auto; 
     margin: 0 auto 0 auto; 
} 

#header { 
     color: #fff; 
     font-size: .9em; 
     width: 190px; 
     height: 40px; 
     float: left; 
     margin-right: 2px; 
} 


    /* --------------------------------------------- NAVIGATION */ 
#navigation { 
     padding-top: 15px; 
     width: 960px; 
     float: left; 
} 

#navigation .link { 
     background: #f0f0f0; 
     float: left; 
     text-align:center; 
     font-size:0.5cm 
    } 

#navigation .link:hover { 
     background: #92c19b; 
} 

#navigation .link:focus{ 
     background:silver;  
    } 
#navigation .link:active{ 
background:silver; 
} 

#navigation li a { 
     padding-top: 15px; 
     padding-left: 15px; 
     width: 176px; 
     height: 45px; 
     margin-bottom: 1px; 
     border-left: #fff solid 1px; 
     color: #000; 
     float: left; 
     font-size: 1em; 
} 

#navigation p { 
     position: absolute; 
     font-size: .8em; 
     top: 45px; 
     padding-left: 15px; 
} 

/* --------------------------------------------- FONTS & IMAGES */ 
h1 {font-size: 1.9em;} 
#header h1 {padding: 15px; background: #000; text-align: center; font-weight: bold;} 
#header a {color: #fff;} 
h2 {font-size: 1.9em;} 
#splash h2 {color: #12884f;} 
h3 {font-size: 1.4em; line-height: 1.1em;} 
h4 {font-size: 1em; font-weight: bold;} 
p {font-size: .8em; line-height: 1.6em;} 
p.footer {font-size: .6em; color: #000; text-align: right; padding-top: 100px;} 
p.header {font-size: .8em; font-style: italic; color: #ababab;} 
#content p, #content h3, #sidebar h3, #content h4, #sidebar p {margin-bottom: 25px;} 
img {margin: 0 0 25px 0;} 
li {font-size: .7em; margin-bottom: 10px;}

兩個li:active和li:focus也沒有突出的活動標籤。但奇怪li:hover確實工作

任何我可以做的解決這個??

我找強調這樣的：

enter image description here

來源

2013-02-14 raghu_3

對不起我的錯，只是刪除最後一個逗號「」開放的大括號之前‘{’和它應該工作。這是我剛剛測試過一個例子：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Home</title> 
     <style> 
      #home #nav_home a, 
      #research #nav_research a, 
      #teaching #nav_teaching a, 
      #about #nav_about a, 
      #cv #nav_cv a { 
       color:aqua; 
      } 
     </style> 
    </head> 
    <body id="research"> 
     <ul> 
      <li id="nav_home"><a href="">Home</a></li> 
      <li id="nav_research"><a href="">Research</a></li> 
      <li id="nav_teaching"><a href="">Teaching</a></li> 
      <li id="nav_about"><a href="">About</a></li> 
      <li id="nav_cv"><a href="">CV</a></li> 
     </ul> 
    </body> 
</html>

我希望這有助於:)對不起錯誤的答案之前，我說我剛開始的網絡開發自己。

乾杯！

來源

2013-02-14 15:06:01 Dasuevia

的CSS：主動選擇，只有當鏈路活動適用 - 即被點擊。 The：焦點選擇器只允許接受鍵盤事件或其他用戶輸入的元素。我自己對Web開發相當陌生，但我認爲你無法通過這些選擇器實現你想要的。

您可以嘗試爲標籤菜單中的每個頁面的body標籤分配一個id，併爲菜單中的每個li分配一個不同的id。例如：

<body id="home">  <!-- on default.html --> 
<body id="research"> <!-- on research.html --> 
<body id="teaching"> <!-- on teaching.html --> 
<body id="contact">  <!-- on about.html --> 
<body id="cv">   <!-- on cv.html -->

你的菜單可能是這個樣子：

<ul> 
    <li class="link" id="nav_home"><a href="default.html" title="Product">Home</a></li> 
    <li class="link" id="nav_research"><a href="Research.html" title="Product">Research</a></li> 
    <li class="link" id="nav_teaching"><a href="Teaching.html" title="Progress">Teaching</a></li> 
    <li class="link" id="nav_contact"><a href="about.html" title="About">Contact</a></li> 
    <li class="link" id="nav_cv"><a href="CV.html" title="CV">CV</a></li> 
</ul>

然後在你的CSS，你可以做這樣的事情：

#home #nav_home a, 
#research #nav_research a, 
#teaching #nav_teaching a, 
#contact #nav_contact a, 
#cv #nav_cv a, { 
    background:silver; 
}

另一種選擇是隻創建一個新的類（例如class =「active_link」）和活動選項卡的相關樣式，然後在每個頁面手動設置它。

正如我所說我自己對web開發相當陌生，但兩種解決方案都應該可以工作。如果你正在尋找更動態的東西，你可能需要一些Javascript。

我希望這會有所幫助。

乾杯，

來源

2013-02-14 02:24:32 Dasuevia

做了你剛剛說的，不起作用。:-( – 2013-02-14 02:45:58

突出顯示導航中的活動標籤

回答

相關問題