更改菜单按钮，无需重新加载站点

Question

实际上我的菜单看起来像 this，最后我的导航栏应如下所示： http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation 我无法使用它，因为我无法加载它们.js ..它只是运行不好。

所以我试图单独写一下，机械师：

写它的最佳方法是什么？我可以轻松地将鼠标悬停在div上，但按钮需要保持悬停到下一次点击而不加载网站。

PS-Buttons的形状不规则，所以我们需要在div上使用背景图像。

Answer 1

我认为通过在您的javascript插件中使用CSS可以解决这个问题。

请注意，您的javascript插件会自动在您单击的标签上分配ui-state-active。通过使用它，您可以设置css样式：

li.ui-state-active > a {
  background-image: url(http://placehold.it/100x25/c3a3f3/ffffff) !important;
}

相应地更改背景图片。

如果您需要删除outline上的:focus属性的默认橙色边框，请将其设置为无。这应该足够了。

a:focus {
  outline: none;
}

或使用此

a, a:focus {
  outline: none !important;
}

确保它不会出现在任何a标记上。

Answer 2

您可以将悬停样式定义为类，并使用jquery将该类分配给悬停时的div。直到下一次悬停，它停留，当鼠标进入另一个div时，你可以删除它。 例如：

$(document).ready(function(){

$(".menu.div").mouseenter(function(){
$(".menu.div").removeClass("active");
$(this).addClass("active");
});
});