0 
<div class="abcd">
    <article class="xyz">
        <a href="#"><img src="#"></a>
        <hgroup><h1>Make it Personal</h1></hgroup>
    </article>
</div>

我在 div 中有 6 个以上的“文章”标签。我将它们用作标签。我有 6 页，我在所有 6 页上都应用了相同的代码。我希望它们在活动时突出显示。单击后，他们将转到提供上述相同代码的 6 个页面之一。我想在选项卡处于活动状态时应用一些 CSS 属性。

如何使用简单的 javascript 实现这一点？

4

1 回答 1

-1

这是一些可能对您有所帮助的代码。

 html,body {
        margin:0;
        padding:0;
        color:#222;
        background:#FFF;
    }
    body {
        padding:10px;
        font:76%/150%  Arial, Helvetica, sans-serif;
    }
    a {
        text-decoration: none;
        outline: 0; /* removes dotted border around a:active from Firefox */
    }
    #nav {
        margin:0;
        padding:0;
        background:#708090 url(nav_bg.jpg) 0 0 repeat-x;
        width:100%;
        float:left;
        border:1px solid #191970;
        border-width:1px 1px 1px 0;
    }
    #nav li {
        display:inline;
        padding:0;
        margin:0;
    }
    #nav a:link,
    #nav a:visited {
        color:#000;
        background:#708090;
        padding:20px 40px 4px 10px;
        float:left;
        width:auto;
        border-right:1px solid #191970;
        text-decoration:none;
        font:bold 1em/1em Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-shadow: 2px 2px 2px #555;
    }
    #nav a:hover {
        color:#fff;
        background:#191970;
    }
    #nav li:first-child a {
        border-left:1px solid #191970;
    }
    #home #nav-home a,
    #about #nav-about a,
    #contact #nav-contact a {
        background:#00FFFF; /* Active Page Color */
        color:#000;
        text-shadow:none;
    }
    #home #nav-home a:hover,
    #about #nav-about a:hover,
    #contact #nav-contact a:hover {
        background:#FFF;
        color:#000;
    }
    #nav a:active {
        background:#7FFF00; /*turns this color briefly when link is selected*/
        color:#000;
    }
</style>
</head>
<body id="about">
<ul id="nav">
    <li id="nav-home"><a href="#">Home</a></li>
    <li id="nav-about"><a href="#">About</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</body>
</html>

提琴手

于 2012-06-21T11:34:42.600 回答