Question

我正在尝试突出显示选项卡式导航网站中的活动标签。这是标签的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

Answer 1

CSS：活动选择器仅在链接处于活动状态时应用 - 即单击时。：焦点选择器仅允许接受键盘事件或其他用户输入的元素。我自己对网络开发还很陌生，但我认为你无法用这些选择器实现你想要的东西。

您可以尝试为标签菜单中的每个页面的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”）和相关样式，然后每页手动设置它。

正如我所说，我自己对网络开发相当新，但两种解决方案都应该有效。如果你正在寻找更具动感的东西，你可能需要一些Javascript。

我希望这会有所帮助。

干杯，

Answer 2

抱歉我的错误，只需在打开大括号“{”之前删除最后一个逗号“，”它应该可以正常工作。这是我刚刚测试过的一个例子：

<!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>

我希望这会有所帮助:)对不起之前的错误答案，正如我所说的那样，我只是自己开始进行网页开发。

干杯！

突出显示导航中的活动选项卡

2 个答案: