Question

我想基本上这样做，以便在我的网站上当用户点击导航栏按钮时它会改变图像。其中我在图像上设置了按钮上的文字以不同的颜色显示。

到目前为止，我已经开发了以下css：

#HomeOver
{
    width: 188px;
    height: 54px;
    background: url("Images/Navbar_01.gif");
}

#HomeOver:active 
{
    background: url("Images/NavbarOver_01.gif");
}


#HomeOver:hover
{ 
    background: url("Images/NavbarOver_01.gif");
}

HTML然后将ID链接到CSS以显示正确的图像..但我的问题是，在“活动”，它似乎不起作用，任何人都可以建议编码有什么问题？悬停工作正常

Answer 1

:active pseudo仅在保持点击时才有效，只要您离开点击，效果就会出现，您可以实现活动标签，通过使用客户端脚本（如JavaScript / jQuery）并将class分配给目标元素，或使用服务器端脚本（如PHP）进行分配。

Demo （实际上:active伪的工作方式）

使用jQuery实现这一点......

Demo

var active_menu = $('nav a').click(function(){ //onclick of a nested inside nav 
    active_menu.removeClass('active'); //Remove all the classes first
    $(this).addClass('active'); //Assign the class to the a which is clicked
});

Answer 2

#HomeOver.active {
    background: url("Images/NavbarOver_01.gif");
}

然后只需通过JavaScript或直接在相应页面的html中将“active”类添加到导航按钮。

Answer 3

正如Alien先生所说，只要你点击鼠标按钮，péude等级:active才会起作用。要实现永久活动状态，您必须使用jquery在单击时更改类。

jsfiddle

JS

$('div').click(function() {
    $(this).toggleClass('active');
});

CSS

div:active,
div.active {
    color: #f00;
}

或者你必须在使用php生成服务器端时给acitve元素.active类：

print '<div' . (active ? ' class="active"' : '') . '></div>'

Answer 4

使用jquery

点击使用.addClass和.removeClass

Answer 5

如果您不想使用JavaScript，则可以改为使用input:radio。

<强> HTML

<div id="links">
    <label><input type="radio" name="links" /><div class="image"></div></label>
    <label><input type="radio" name="links" /><div class="image"></div></label>
    <label><input type="radio" name="links" /><div class="image"></div></label>
</div>

<强> CSS

#links input {
    display: none;
}

#links .image {
    background: url("Images/Navbar_01.gif");
}

#links label:hover .image,
#links input:checked ~ .image {
    background: url("Images/NavbarOver_01.gif");
}

请参阅test case on jsFiddle。

网站上的活动页面？

5 个答案: