web-dev-qa-db-ja.com

ボタンをクリックした後にアクティブCSSスタイルを維持する方法

ボタンがクリックされたら、通常のスタイルに戻るのではなく、アクティブなスタイルのままにしておきます。 CSSでこれを行うことができますか？ DIVIテーマ（WordPress）の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; }
htmlcsswordpress
28
Dereck

CSS

:activeはインタラクションの状態を示します（したがって、ボタンを押すと適用されます）。ここでは、:focusの方が適しています。ただし、別の要素がフォーカスを取得すると、スタイリングは失われます。

CSSを使用する最後の潜在的な代替手段は、クリックされる項目がページ内でルート（アンカーなど）を設定していると仮定して:targetを使用することです。ただし、ルーティング（Angularなど） 。

.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ではabsolutelyスタイルの状態を切り替える方法はありません。上記のいずれも機能しない場合は、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>
47
SW4

Divi Theme Documentation では、テーマには「統合」セクションもある「ePanel」へのアクセスが含まれていると書かれています。

このコードを追加できるはずです：

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

「統合」タブの下にある「ブログの先頭にコードを追加」というボックスに移動します。これにより、jQueryが機能するはずです。

次に、クラスを必要なものに合わせてスタイル設定できるようにします。

0
GKB

私はそれを考え出した。シンプルで効果的jQUERYなし

非表示のチェックボックスを使用します。
この例には、「オンクリック-オフクリック 'ホバー/アクティブ'状態」が含まれます。

-

コンテンツ自体をクリック可能にするには：

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}

それが役に立てば幸い！！

0
Aaron Fitch

この質問はかなり前に尋ねられましたが、フロントエンドが急速に開発されているという理由で、私のケースについての私自身の答えを残したいと思います。私はvuejsでアプリを構築していますが、ボタンのクリック時にアクティブクラスの必要性が同じでした。 3つのボタンと2つの選択オプションがあります。最初の3つのボタンのいずれかをクリックすると、アクティブになります。ただし、選択オプションをクリックすると表示されなくなります。また、テンプレートをマウント（コンパイル）するときにAllボタンをアクティブにする必要がありました。

enter image description here

上記の回答とインターネットを使用して行ったことは次のとおりです。それぞれクラスbtn--week、btn--monthおよびbtn--allを追加しました。

<div class="btn-group">
          <button
            type="button"
            class="btn btn-md light btn--week"
            v-on:change="latestType = 'week'"
          >Week</button>
          <button
            type="button"
            class="btn btn-md light btn--month"
            v-on:change="latestType = 'month'"
          >Month</button>
          <button
            type="button"
            class="btn btn-md light btn--all"
            v-on:change="latestType = ''"
          >All</button>
        </div>

Vuejsスクリプトの私のメソッドオプションで：

methods:{
 toggleButtonActiveClass() {
      // TODO: add and remove class when one is added
      $(".btn--week").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--month").click(function() {
        $(".btn--week").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--all").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--week").removeClass("active");
        $(this).toggleClass("active");
      });
    }
}

マウントされたライフサイクル：

 mounted() {
    this.toggleButtonActiveClass();
    $(".btn--all").toggleClass("active"); //to keep all button active when template created
  }

これは完璧なコードスタイルではないことは知っていますが、うまくいきました。将来、他の誰かに役立つことを願っています。

0
Nodirabegimxonoyim