Javascript HTML和CSS中的选项卡颜色问题

需要有关页面选项卡的帮助

1） 我的页面上有以下选项卡

默认情况下，当页面加载时，不会突出显示任何选项卡。我希望默认情况下突出显示“业务系统功能”选项卡。我如何做到这一点

2） 选择选项卡时，选项卡颜色和边框颜色相同

但当我将鼠标悬停在任何其他选项卡上时，边框的颜色将更改为

悬停

颜色。我不要这个。我只想在单击选项卡时更改边框颜色。我如何做到这一点

我的代码在这里-

1）添加一个类，例如

活动

，该类的作用与悬停相同

.tab1:hover, .tab1.active {
  background: #3399CC;
  color: #fff;
  border: none;
}

添加类将突出显示您的元素

2）边框颜色根本不会改变，因为您正在使用

border:none删除边框设置另一种
边框颜色
或保持原样。
以下是解决方案

在页面加载时将
.tab1
设置为当前/选中。将以下代码添加到您的
$（文档）.ready（）

$（'.tab1'）.addClass（'current'）；
$（'.tab content'）.css（“边框顶部”，“5px实心”#3399CC”）；
$（'#tab-1'）.addClass（'current'）；


删除jQuery
.hover（）
以删除边框样式


示例代码片段：


$（文档）.ready（函数（）{
/*在页面加载时应用当前值*/
$（'.tab1'）.addClass（'current'）；
$（'.tab content'）.css（“边框顶部”，“5px实心”#3399CC”）；
$（'#tab-1'）.addClass（'current'）；
$（'ul.tabs li'）。单击（函数（）{
var contentid='#'+$（this.attr（'datatab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（contentid）.addClass（'current'）.css（“边框顶部”、“5px实心”+$（this.css（“背景色”）；
});
});
.home选项卡标题{
宽度：100%；
高度：65px；
填充：10px 0 10px 0；
}
家鸭{
宽度：35px；
浮动：左；
填充：12px 10px 0；
}
.本垒打{
显示：块；
浮动：左；
字体大小：22px；
边缘顶部：20px；
边缘底部：20px；
清楚:对,；
字体系列：“Segoe UI”，arial，无衬线；
}
.首页副标题{
边缘顶部：10px；
边缘底部：10px；
}
.首页副标题{
字体大小：15px；
颜色：#000；
字号：500；
字体系列：“Segoe UI”，arial，无衬线；
显示：内联flex；
}
.tab-content1{
左边距：2.2米；
显示：内联flex；
弯曲方向：行；
柔性包装：包装；
对正内容：左；
}
.tab-content1-block{
填充：0.1em 1em.5em；
最小宽度：30%；
}
.tab-content1-block ul li{
边缘底部：10px；
左边距：-22px；
}
-css-
/*在主页上隐藏社区和anon的用户导航。为专业会员展示*/
.columbia页面主页.elm页眉用户导航{
显示：无；
}
.columbia-page-home.elm-user-pro-member.columbia-page-home.elm头用户导航{
显示：块；
}
/*在主页上隐藏社区和anon的用户导航*/
.columbia主页。elm标题主页导航{
显示：无；
}
/*隐藏用户导航在主页上的全局搜索*/
.columbia page主页.elm全球搜索{
可见性：隐藏；
}
/*仅根据主页的用户角色设置页脚的正确位置*/
.columbia主页.榆树页脚{
底部：自动；
}
@介质和全部（最小宽度：78.75em）{
.elm-user-pro-member.columbia-page-home.elm页脚{
底部：3.4em；
}
}
@介质和全部（最小宽度：37.5em）{
.elm-user-pro-member.columbia-page-home.elm页脚{
底部：自动；
}
}
li.ui-state-active{
填充底部：0px！重要；
}
-css-
/*页面选项卡模板的代码*/
body.ui选项卡.ui选项卡导航li a{
填充物：5em 1em；
宽度：225px；
单词包装：首字母；
高度：25px；
文本对齐：居中；
显示：内联块；
}
-css-
/*新选项卡的代码*/
. 身体{
边缘顶部：100px；
字体系列：“投石机MS”，衬线；
线高：1.6浮动：左；
}
容器{
宽度：自动；
利润率：0；
}
ul标签{
边际：0px；
填充：0px；
列表样式：无；
}
李先生{
背景：#efef；
颜色：#222；
显示：内联块；
填充：10px 15px；
光标：指针；
边框顶部：1px实心#000；
左边框：1px实心#000；
右边框：1px实心#000；
边界半径：5px 5px 0px 0px；
}
.表1：悬停{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab2：悬停{
背景：#12B58A；
颜色：#fff；
边界：无；
}
.tab3：悬停{
背景：#673ab7；
颜色：#fff；
边界：无；
}
.表4：悬停{
背景#336699；
颜色：#fff；
边界：无；
}
.表5：悬停{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab6：悬停{
背景：#12B58A；
颜色：#fff；
边界：无；
}
.tab7：悬停{
背景：#673ab7；
颜色：#fff；
边界：无；
}
.tab8：悬停{
背景#336699；
颜色：#fff；
边界：无；
}
.表9：悬停{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab10：悬停{
背景：#12B58A；
颜色：#fff；
边界：无；
}
.tab11：悬停{
背景：#673ab7；
颜色：#fff；
边界：无；
}
.tab-link.tab1.current{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab-link.tab2.current{
背景：#12B58A；
颜色：#fff；
边界：无；
}
.tab-link.tab3.current{
背景：#673ab7；
颜色：#fff；
边界：无；
}
.tab-link.tab4.current{
背景#336699；
颜色：#fff；
边界：无；
}
.tab-link.tab5.current{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab-link.tab6.current{
背景：#12B58A；
颜色：#fff；
边界：无；
}
.tab-link.tab7.current{
背景：#673ab7；
颜色：#fff；
边界：无；
}
.tab-link.tab8.current{
背景#336699；
颜色：#fff；
边界：无；
}
.tab-link.tab9.current{
背景：#3399CC；
颜色：#fff；
边界：无；
}
.tab-link.tab10.current{
背景：#12B58A；
颜色：#fff；
边界：n