时间戳

首页 > 解决方案 > 在不同的 DIV 上单击超链接时添加一个类

jquery - 在不同的 DIV 上单击超链接时添加一个类

问题描述

JsFiddle在这里

当点击超链接时，我试图在 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>

标签： jqueryonclick

解决方案

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

示例代码笔

$(".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");
  }
);

推荐阅读