Добавить класс, когда гиперссылка нажата на другой DIV

Question

JsFiddle Here

Я пытаюсь добавить другой класс на 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>

Answer 1

Мне не совсем понятно, что вы пытаетесь изменить, но вам просто нужно добавить события щелчка для каждого элемента и убедиться, что вы удаляете класс из другого элемента, который вы не щелкнули в своем обработчике событий.

Пример CodePen

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

Answer 2

Я пишу простой код, основанный на позиции li, чтобы вставить имя класса. если это не ваши потребности, приведите другой пример.

 var oldClass = $('div h1').attr("class");
 $("ul").on("click", "li", function() {
      var calssName =this.className;
     var position = $(this).index();
     
     if(position==0)
     {
       $('div h1').addClass(calssName).addClass("color-red");
       $('div h1').removeClass("color-green")
     }
     else if(position ==1){
       $('div h1').removeClass("color-red")
       $('div h1').addClass(calssName).addClass("color-green");
     }

})

.color-red{color:red;}
.color-green{color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="tabsnav" 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>