4

HTML/CSS ですべてではなく 1 つのリスト項目の色を変更する方法はありますか? それぞれの色を変更して、ユーザーが自分がどのページにいるのかがわかるようにしたいだけです。今のところ、私はそれを行うことしかa:hoverできませんでしたが、どうすれば色が残るようにすることができるのかわかりません.

HTML:

<div id="nav">
    <div class="wrapper">
        <ul id="buttons">
        <li><a href="index.html">| About</a></li>
        <li><a href="html/gallery.html">| Gallery</a></li>
        <li><a href="html/prices.html">| Prices</a></li>
        <li><a href="html/faq.html">| FAQ</a></li>
        <li><a href="html/contact_us.html">| Contact Us</a></li>
        <div class="clear"></div>
        </ul>
    </div>
</div>

CSS:

#buttons {
background-color: black;
}

.clear { clear: both; }

#buttons li a
{
position:block;
color:#fff;
padding:1em;
text-decoration:none;
float:left;
width:95px;
}

#buttons li a:hover
{
background-color:#bc1b32;
}
4

4 に答える 4

3

見てください：http://jsfiddle.net/qzXgJ/

詳細：

HTML

<div>
    <div class="wrapper">
        <ul>
        <li><a id="index" href="#">| About</a></li>
        <li><a id="gallery" href="#">| Gallery</a></li>
        <li><a id="prices" href="#">| Prices</a></li>
        <li><a id="faq" href="#">| FAQ</a></li>
        <li><a id="contact_us" href="#">| Contact Us</a></li>
        <div class="clear"></div>
        </ul>
    </div>
</div>​​​

JS

$(".wrapper li a").click(function () {

    $('.wrapper li a').each(function() {
        $(this).removeClass('selected');
    });

    $(this).addClass('selected');

    $(".wrapper ul li a").click(function () {

    $('.wrapper ul li a').each(function() {
        $(this).removeClass('selected');
    });

    $(this).addClass('selected');

    console.log($(this).attr('id'));

    /* Get html by jQuery */ 
    $.get($(this).attr('id'),function(data){
        $('#result').html(data);
    });

    return false;
});

CSS

.selected
{
    background-color:#b51ba2;
}
于 2012-12-13T01:06:59.853 に答える
1

最も簡単な方法は、クラスを作成して、色を変更したいタグに追加することです。

.selected { background-color: green; }

次に、リンクは次のようになります。

<li><a class='selected' href="index.html">| About</a></li>
于 2012-12-13T01:00:39.050 に答える
0

同じ質問に対してこの回答を使用しましたが、良い結果が得られました: http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

于 2012-12-13T01:00:05.867 に答える
-1

質問は少しあいまいです。ユーザーがどのページにいるかを示すために、最後にクリックしたリンクを含む特定のリスト項目にクラスを追加できます。

<li class="current">
    <a href="html/prices.html">| Prices</a>
</li>

次に、そのための特定のスタイルを提供します。

li.current {
    background-color: #f1f1f1;
}
于 2012-12-13T01:00:18.773 に答える