1

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

我能做些什么来解决这个问题？？

我正在寻找突出显示这样的内容：

在此处输入图像描述

4

2 回答 2

2

CSS :active 选择器仅在链接处于活动状态时适用 - 即被点击。:focus 选择器只允许用于接受键盘事件或其他用户输入的元素。我本人对 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-14T02:24:32.340 回答
1

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

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

我希望这会有所帮助 :) 抱歉之前的错误答案，正如我所说的，我自己刚刚开始 Web 开发。

干杯!

于 2013-02-14T15:06:01.393 回答