突出显示导航中的活动标签

我想突出显示标签导航站点中的活动标签。这是制表符的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

突出显示导航中的活动标签

回答

相关问题