유지 방법: 버튼 클릭 후 액티브한 css 스타일

유지 방법: 버튼 클릭 후 액티브한 css 스타일

일단 버튼을 클릭하면 일반 스타일로 돌아가지 않고 액티브한 스타일을 유지하고 싶습니다.CSS로 할 수 있을까요?DIVI Theme (Word Press)의 blurb 버튼을 사용하고 있습니다.제발 저좀 도와주세요!

코드:

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:hover {
           color: red !important; }
    
    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:selected {
      background-color: #ff4b46;
      color: #fff; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:active {
        color: white !important;
       background-color: red; 
        width: 140px;
        height: 100px; }

CSS

:active는 상호작용 상태를 나타냅니다(따라서 버튼은 누르는 동안 적용됩니다).:focus더 나은 선택일 수도 있어요그러나 다른 요소가 초점을 맞추면 스타일링이 손실됩니다.

CSS를 사용하는 마지막 잠재적 대안은 다음과 같습니다.:target클릭하는 항목이 페이지 내에서 루트(앵커 등)를 설정하고 있다고 가정하면 라우팅(각도 등)을 사용하고 있는 경우는 중단될 수 있지만, 여기서는 그렇지 않은 것 같습니다.

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>

Javascript / jQuery

따라서 CSS에서는 스타일링 상태를 완전히 전환할 수 없습니다.상기 중 어느 것도 기능하지 않을 경우 HTML 변경과 결합하거나(체크박스에 따라), jQuery를 사용하여 클래스를 프로그램적으로 적용/삭제해야 합니다.

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});

button.selected{
  color:red;
}

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

<button>Item</button><button>Item</button><button>Item</button>
  

숨김 확인란을 사용할 예정입니다.
이 예에는 "온클릭 오프 클릭 '호버/액티브' 상태"가 1개 포함됩니다.

--

컨텐츠 자체를 클릭 가능하게 하려면:

HTML

<input type="checkbox" id="activate-div">
  <label for="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>
  </label>

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}

버튼 변경 내용을 작성하려면:

HTML

<input type="checkbox" id="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>

<label for="activate-div">
   //MY BUTTON STUFF
</label>

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

도움이 되었으면 좋겠다!!

Divi Theme Documentation에는 테마가 'ePanel'에 액세스할 수 있으며 '통합' 섹션도 있다고 나와 있습니다.

다음 코드를 추가할 수 있습니다.

<script>
 $( ".et-pb-icon" ).click(function() {
 $( this ).toggleClass( "active" );
 });
</script>

'통합' 탭 아래에 있는 '블로그 머리글에 코드 추가' 상자에 jQuery가 작동합니다.

그러면, 여러분은 여러분이 원하는 대로 수업을 스타일링할 수 있을 거예요.

언급URL : https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button