Jquery 在其他DIV上单击超链接时添加类

当我点击超链接时，我试图在h1上添加一个不同的类，如果我点击第二个，清除第一个类并添加一个不同的类

谢谢各位，希望这足够清楚

<ul class="nav nav-tabs hero-image-tabs">
    <li class="hero-img-1"><a href="#" data-toggle="tab" data-bg="img/bg-img-hero-2.jpg">Hero 1</a></li>
    <li class="hero-img-2"><a href="#" data-toggle="tab" data-bg="img/bg-img-hero-8.jpg">Hero 2</a></li>

</ul>

<header class="hero-section py-5 ">
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h1 class="display-4 text-white mt-4">Connecting Leaders. Inspiring Innovation.</h1>
            </div>
        </div>
    </div>
</header>

连接领导者。鼓励创新。

我根据li的位置编写了一个简单的代码来插入类的名称。 如果这不是你的需要，给我另一个例子

var oldClass=$（'divh1'）.attr（“类”）；
$（“ul”）。单击（“click”，“li”，function（）{
var calssName=this.className；
var position=$（this.index（）；
如果（位置==0）
{
$（'div h1'）.addClass（calssName）.addClass（“红色”）；
$（'div h1'）.removeClass（“绿色”）
}
否则如果（位置==1）{
$（'div h1'）.removeClass（“红色”）
$（'div h1'）.addClass（calssName）.addClass（“绿色”）；
}
})

.color red{color:red；}
.color绿色{color:green}

连接领导者。鼓励创新。

我不完全清楚您要更改什么，但您只需要向每个元素添加click事件，并确保从事件处理程序中未单击的其他元素中删除该类

---

请展示您迄今为止所做的尝试。这不是代码请求的地方。

$(".hero-img-1").click(
 function(){
  $(this).addClass("bolder");
  $(".hero-img-2").removeClass("bolder");
 }
);

$(".hero-img-2").click(
  function(){
    $(this).addClass("bolder");
    $(".hero-img-1").removeClass("bolder");
  }
);