Question

<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个页面之一。我想在tab激活时应用一些css属性。

如何使用简单的javascript实现此功能？

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

JsFiddle

单击时如何将css属性应用于选项卡？

1 个答案: