How to reserve the border colour when clicking on a menu

Question

I have the following tab menu inside my SharePoint web site. I have applied the following Script to show blue border around the tab:-

$(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');

});

Which will work well as follow:-

But when the user clicks on the tab the border will be cleared out as follow:-

Can anyone advice how I can keep the border shown regardless of whether the tab was clicked or not ? Thanks

Answer 1

Put the css class which mention below in style tag.

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

then add the following code in script tag.

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

This is not clear the border unless or until your do reload, refresh or execute the below script.

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

but make sure that the above code will removes the all span tag border who contains Page Options. So you need to track of that specific span otherwise which you want to remove that class.

please have a look of the below url

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

I don't found any issue. on this. let me know for futher help!. Thanks.