Html 链接应保持按下状态，直到您单击另一个链接

我在玩html和css。但我不能让它工作

我想要的：当你打开网站时，第一个链接/标签应该显示为按下状态。当您单击另一个链接时，它应更改为“未压缩”。上面有一条绿线。我希望它在您同时按下导航选项卡/链接时更改其颜色

body{}
标题{
位置：固定；
宽度：100%；
边框顶部：5px实心#8dc63f；
高度：120px；
背景：白色；
z指数：1000；
边框底部：2倍实心#fff；
排名：0；
}
h1{
字体大小：70px；
颜色：红色；
字体大小：60px；
填充顶部：500px；
}
氢{
字体大小：70px；
颜色：蓝色；
字体大小：60px；
填充顶部：500px；
}
导航{
位置：绝对位置；
右：-17px；
底部：0；
}
导航ul{
列表样式：无；
}
李国荣{
显示：块；
浮动：左；
}
海军ulli a{
字体系列：“开放式Sans”，无衬线；
右边距：2px；
颜色：白色；
宽度：100px；
填充：10px；
显示：块；
文本对齐：居中；
位置：相对位置；
文字装饰：无；
}
导航ulli a：悬停{
颜色：#fff；
}
nav ul li a：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：#8dc63f；
z指数：-1；
变换：倾斜（-40度）；
边缘底部：-2px；
}
海军ulli a：：以前{
内容：“+”；
}
a:悬停：：之后{
背景：#cbda29；
}

HTML

你好我是Link1。如果您看到这一点，第一个链接/按钮应保持按下/单击/浅绿色背景，直到
单击另一个链接。如果单击链接，顶行“border top”也应更改其颜色。
哦，你好，我是你点击的第二个链接。第一个按钮不应该再点击了。现在link2应该出现了
作为一个点击按钮。

单击导航链接时，给它一个类，例如“活动”，并从任何其他“活动”链接中删除该类

使用正确的css，您可以为头提供相同的“活动”类

更新的代码段：

$（“nav>ul>li>a”）。单击（函数（）{
$（“a.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
$（“标题”）.css（“边框顶部颜色”，$（此）.data（“颜色”））
});
a.active:：after{
背景色：#cbda29；
}
header.active{
边框顶部颜色：#cbda29；
}
主体{}
标题{
位置：固定；
宽度：100%；
边框顶部：5px实心#8dc63f；
高度：120px；
背景：白色；
z指数：1000；
边框底部：2倍实心#fff；
排名：0；
}
h1{
字体大小：30px；
颜色：红色；
字体大小：60px；
填充顶部：50px；
}
氢{
字体大小：30px；
颜色：蓝色；
字体大小：60px；
填充顶部：50px；
}
导航{
位置：绝对位置；
右：-17px；
底部：0；
}
导航ul{
列表样式：无；
}
李国荣{
显示：块；
浮动：左；
}
海军ulli a{
字体系列：“开放式Sans”，无衬线；
右边距：2px；
颜色：白色；
宽度：100px；
填充：10px；
显示：块；
文本对齐：居中；
位置：相对位置；
文字装饰：无；
}
导航ulli a：悬停{
颜色：#fff；
}
nav ul li a：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：#8dc63f；
z指数：-1；
变换：倾斜（-40度）；
边缘底部：-2px；
}
海军ulli a：：以前{
内容：“+”；
}
a:悬停：：之后{
背景：#cbda29；
}







你好我是Link1。如果您看到这一点，第一个链接/按钮应保持按下/单击/浅绿色背景，直到您单击另一个链接。如果单击链接，顶行“border top”也应更改其颜色。
哦，你好，我是你点击的第二个链接。第一个按钮不应该再点击了。现在，link2应该显示为单击的按钮。

打开站点时，第一个链接/选项卡应显示为按下状态

下面的示例将使第一个选项卡在页面加载时使用不同的颜色。我在li中添加了一个
active
类来更改颜色。在单击菜单项期间，您应该删除/添加一个类，例如：
active
到
li
，以更改特定菜单按钮的颜色

使用下面的JS切换类名

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
})


$（'nava'）。在（'click'，function（）上{
$（'nav li'）.removeClass（'active'）；
$（this.parent（）.addClass（'active'）；
$（'header'）.css（'border-top-color'，'red'）；
})
body{}
标题{
位置：固定；
宽度：100%；
边框顶部：5px实心#8dc63f；
高度：120px；
背景：白色；
z指数：1000；
边框底部：2倍实心#fff；
排名：0；
}
h1{
字体大小：70px；
颜色：红色；
字体大小：60px；
填充顶部：500px；
}
氢{
字体大小：70px；
颜色：蓝色；
字体大小：60px；
填充顶部：500px；
}
导航{
位置：绝对位置；
右：-17px；
底部：0；
}
导航ul{
列表样式：无；
}
李国荣{
显示：块；
浮动：左；
}
海军ulli a{
字体系列：“开放式Sans”，无衬线；
右边距：2px；
颜色：白色；
宽度：100px；
填充：10px；
显示：块；
文本对齐：居中；
位置：相对位置；
文字装饰：无；
}
导航ulli a：悬停{
颜色：#fff；
}
nav ul li a：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：#8dc63f；
z指数：-1；
变换：倾斜（-40度）；
边缘底部：-2px；
}
海军ulli a：：以前{
内容：“+”；
}
a:悬停：：之后{
背景：#cbda29；
}
nav li.active a：：之后{
背景：红色；
}







你好我是Link1。如果您看到这一点，第一个链接/按钮应保持按下/单击/浅绿色背景，直到您单击另一个链接。如果单击链接，顶行“border top”也应更改其颜色。
哦，你好，我是你点击的第二个链接。第一个按钮不应该再点击了。现在链接2 sh
a.active::after {
  background-color:#cbda29; 
}
header.active {
  border-top-color:#cbda29; 
}

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
})