>

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>


  • 답변 # 1

    나는 클래스의 이름을 삽입하는 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>
    
    

  • 답변 # 2

    변경하려는 내용이 명확하지 않지만 각 요소에 클릭 이벤트를 추가하고 클릭하지 않은 다른 요소에서 클래스를 제거해야합니다. 이벤트 핸들러 내에서.

    예제 코드 펜

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

관련 자료

  • 이전 java - 더 많은 데이터를로드 할 때 Recyclerview의 애니메이션 중지
  • 다음 python - 로지스틱 회귀 메모리 오류