在选项卡上使用Javascript的活动状态

是否有一种使用Javascript的方法，以便在默认情况下加载页面时，第一个选项卡的颜色为深绿色。此外，单击选项卡后，活动状态将变为深绿色。我在CSS中设置了它，使悬停状态变为深绿色，但我需要使用JavaScript的活动状态

非常感谢你的帮助！我从中删除了很多代码

.tabs\u手风琴{
显示：块；
保证金：0自动；
最大宽度：1200px；
}
.tabs\u手风琴>输入{
/*位置：相对位置；
左：-50000px；
高度：0px；
线高：0*/
显示：无；
}
.tabs\u手风琴>输入：第n个子项（1）：选中~ul.tabs>li:n类型（1）{
字体大小：粗体；
}
.tabs\u accordion>输入：第n个子项（1）：选中~div.content>标签：第n个类型（1）{
字体大小：粗体；
页边距底部：0；
}
.tabs\u accordion>输入：第n个子项（1）：选中~div.content>div:n类型（1）{
显示：块；
边界顶部：无；
背景图片：url（picture-1.jpg）；
最小高度：380px；
背景重复：无重复；
-webkit背景大小：包含；
-moz背景大小：包含；
背景尺寸：包含；
}
.tabs\u手风琴>输入：第n个子项（2）：选中~ul.tabs>li:n类型（2）{
字体大小：粗体；
}
.tabs\u accordion>输入：第n个子项（2）：选中~div.content>标签：第n个类型（2）{
字体大小：粗体；
页边距底部：0；
}
.tabs\u accordion>输入：第n个子项（2）：选中~div.content>div:n类型（2）{
显示：块；
边界顶部：无；
背景图片：url（picture-2.jpg）；
最小高度：380px；
背景重复：无重复；
-webkit背景大小：包含；
-moz背景大小：包含；
背景尺寸：包含；
}
.tabs\u手风琴>输入：第n个子项（3）：选中~ul.tabs>li:n类型（3）{
字体大小：粗体；
}
.tabs\u accordion>输入：第n个子项（3）：选中~div.content>标签：第n个类型（3）{
字体大小：粗体；
页边距底部：0；
}
.tabs\u accordion>输入：第n个子项（3）：选中~div.content>div:n类型（3）{
显示：块；
边界顶部：无；
背景图片：url（picture-3.jpg）；
最小高度：380px；
背景重复：无重复；
-webkit背景大小：包含；
-moz背景大小：包含；
背景尺寸：包含；
}
.tabs\u手风琴ul.tabs{
显示：表格；
宽度：100%；
显示：无；
背景色：#deeab4；
填充：0；
保证金：0；
溢出：隐藏；
框大小：边框框；
-moz用户选择：-moz无；
-ms用户选择：无；
-webkit用户选择：无；
用户选择：无；
颜色：#333333；
字体大小：16px；
}
手风琴{
显示：表格单元格；
光标：指针；
宽度：238px；
}
.tabs\u手风琴ul.tabs li标签：活动{
背景色：#8cd600；
}
/*开始控件悬停*/
.tabs_accordion[id^=“tab”]：选中+标签{
背景：绿色；
}
/*结束控件悬停*/
.tabs\u手风琴ul.tabs li标签{
显示：块；
高度：74px；
填充：20px；
文本对齐：居中；
左边框：2px实心#c8c8c8；
边际：0px0；
框大小：边框框；
光标：指针；
字体大小：粗体；
}
.tabs\u手风琴ul.tabs li标签：焦点{
背景色：#8cd600；
}
.tabs\u手风琴ul.tabs li标签：活动{
背景色：#8cd600；
}
.tabs\u手风琴ul.tabs李：悬停{
背景色：#8cd600；
颜色：#FFFFFF；
}
.tabs\u手风琴ul.tabs li：悬停标签{
左边框颜色：透明；
}
.tabs\u手风琴ul.tabs li:悬停+li>标签{
左边框颜色：透明；
}
.tabs\u手风琴ul.tabs li：第一个孩子标签{
左边框颜色：透明；
}
.tabs\u手风琴分类内容>标签{
显示：块；
背景色：#deeab4；
填充：20px；
边缘底部：1米；
光标：指针；
-moz用户选择：-moz无；
-ms用户选择：无；
-webkit用户选择：无；
用户选择：无；
文本对齐：居中；
}
.tabs\u手风琴部分内容>部分{
显示：无；
填充：10px；
边缘底部：1米；
}
.tabs\u手风琴ul.tabs{
显示：表格；
}
.tabs\u手风琴分类内容>标签{
显示：无；
}
.tabs\u手风琴部分内容>部分{
页边距底部：0；
}

选择1
选择2
选择3

选择1
选择2
选择3

为活动选项卡添加新的css类

.activeTab
{  
   background-color: green;
}

在DocumentReady事件中，您可以获得第一个选项卡项（li元素），然后将这个新的css类添加到该选项卡项中。此外，当用户单击时，删除当前活动类并将

activeTab

类设置为新单击的项

$(function(){  

  //Make first one active
  $(".tabs>li").first().addClass("activeTab");

  $(".tabs>li").click(function(e){

    var _this = $(this); 

    //Remove existing active one  
    $(".activeTab").removeClass("activeTab");   

   //Set the css class to the clicked one
     _this.addClass("activeTab");

  });


})

---

是一个工作样本。

你刚刚救了我的命。这很有效。如果我能给你加100次，我会的。非常感谢你！