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

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页之一，上面的代码相同。 我想在选项卡处于活动状态时应用一些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 个解决方案

解决方案1
-1 2012-06-21 11:34:42

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

问题描述

1 个解决方案

解决方案1 -1 2012-06-21 11:34:42

解决方案1
-1 2012-06-21 11:34:42