javascript - 无需重新加载站点即可更改菜单按钮

Question

实际上我的菜单看起来像这样，最后我的导航栏应该是这样的： http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation 我不能使用它，因为我不能加载他们的.js ..只是效果不好。

所以我想一个人写，机械师：

最好的写法是什么？我可以轻松地将鼠标悬停在 div 上，但按钮需要在没有加载站点的情况下保持悬停到下一次单击。

PS-Buttons 的形状不规则，所以我们需要在 div 上使用 background-image。

Answer 1

我认为这几乎可以通过在您的 javascript 插件中使用 CSS 来解决。

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

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

相应地更改您的背景图像。

如果您需要删除默认的橙色边框，它是outlineon 的一个属性:focus，只需将其设置为 none。这应该足够了。

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");
});
});