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

我的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');

});

这将很好地工作如下：-

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

有谁能告诉我，无论是否单击了选项卡，如何保持边框显示？

---

谢谢

嗨，你可以这样试试。。。最新答案

首先在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');

});

---

将下面提到的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");

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

请查看下面的url

我没有发现任何问题。在这个问题上。 让我知道，以获得进一步的帮助！。

---

谢谢。

尝试使用

！重要信息

更新了我的答案。选择器有点问题。还包括一个jsfiddle谢谢你的回复，当我点击“页面选项”标签时，蓝色的boarder会被删除吗？你知道是什么引起的吗？