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;
}

もう1つのオプションは、アクティブなタブに新しいクラス（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 に答える