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

div内に6つ以上の「article」タグがあります。私はそれらをタブとして使用しています。私は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>

Jsフィドル

于 2012-06-21T11:34:42.600 に答える