javascript - 单击菜单时如何保留边框颜色

Question

我的 SharePoint 网站中有以下选项卡菜单。我已应用以下脚本在选项卡周围显示蓝色边框：-

$(document).ready(function(){

$("span:contains('Page Options')").css('border-top', '4px solid #008CD2');
$("span:contains('Page Options')").css('border-left', '1px solid #008CD2');

$("span:contains('Page Options')").css('border-right', '1px solid #008CD2');

});

这将很好地工作如下： -

但是当用户单击选项卡时，边框将被清除如下：-

任何人都可以建议无论是否单击选项卡，我如何保持显示边框？谢谢

Answer 1

将下面提到的 css 类放在样式标签中。

.tabBorder{
    border-top:4px solid #008CD2;
    border-right:1px solid #008CD2;
    border-left:1px solid #008CD2;
}

然后在脚本标签中添加以下代码。

$(function(){
    $("span:contains('Page Options')").addClass("tabBorder");
});

除非或直到您重新加载、刷新或执行以下脚本，否则这不会清除边界。

$("span:contains('Page Options')").removeClass("tabBorder");

但请确保上面的代码将删除包含页面选项的所有跨度标签边框。因此，您需要跟踪要删除该类的特定跨度。

请看下面的网址

http://jsfiddle.net/shailesh_rathod19/jVpxb/

我没有发现任何问题。对此。让我知道以获得进一步的帮助！谢谢。

Answer 2

嗨，你可以这样尝试...... 更新的答案

http://jsfiddle.net/kasperfish/wfvnQ/

首先在你的 CSS 中添加一个类。我们需要一个单独的类，因为 jquery 无法正确处理“！important”，而且它使一切变得更容易。

.blue_border{
border-top: 4px solid #008CD2 !important;
border-right: 4px solid #008CD2 !important;
border-left: 4px solid #008CD2 !important;
}

然后在你的js中你可以做到。

$(document).ready(function(){

    $("span:contains('Page Options')").addClass('blue_border');

});