Question

HTML：

<ul>
    <li data-target="#front-info" data-slide-to="0" class="col-md-4 col-width-fix front-info-button">
        <h1>Heading One</h1>
    </li>
    <li data-target="#front-info" data-slide-to="1" class="col-md-4 col-width-fix front-info-button">
        <h1>Heading Two</h1>
    </li>
    <li data-target="#front-info" data-slide-to="2" class="col-md-4 col-width-fix front-info-button">
        <h1>Heading Three</h1>
    </li>
</ul>

CSS：

.front-info-button:hover, .front-info-button:active
{
    background-color:#666;
}

它会对悬停做出反应，但在我点击并移开鼠标后，它不会保持颜色。我错过了什么？

Answer 1

您可以在javascript中添加该行为。下面的示例使用jquery来完成此任务：

CSS

.selected {
    background-color:#666;
}

JS

$('ul li').click(function() {
    $('ul li').removeClass('selected');
    $(this).addClass('selected');
});

jsfiddle demo - http://jsfiddle.net/8ZvsF/

Answer 2

你可以使用jQuery创建它：

$('li').hover(function(){
    $(this).addClass("dark")
});

dark类：

.dark {
    background-color:#666;
}

以下是演示：http://jsfiddle.net/6nPu3/

Answer 3

如果您不使用jQuery，请尝试使用此JavaScript vanilla解决方案。

for (var i = 0, item = document.body.getElementsByTagName('li'); i < item.length; i++){
(item[i].attachEvent) ? item[i].attachEvent('onclick', function (){
    item[i].className = item[i].class + ' ' + 'active';
}) : item[i].addEventListener('click', function () {
    this.className = this.class + ' ' + 'active';
}, false);
};

我错过了什么才能让<li>保持点击状态？</li>

3 个答案: