Question

单击按钮后，我希望它保持活动样式而不是恢复正常样式。这可以用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; }

Answer 1

CSS

:active表示交互状态（因此在按下时将应用按钮），:focus可能是更好的选择。但是，一旦另一个元素获得焦点，样式就会丢失。

使用CSS的最终潜在替代方案是使用:target，假设被点击的项目是在页面内设置路线（例如锚点） - 但是如果您使用路由（例如Angular），这可能会被中断，然而，这似乎不是这样的。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript / jQuery

因此，CSS中没有办法绝对切换样式状态 - 如果以上都不适合您，您将需要与HTML中的更改结合（例如，基于在复选框上）或使用例如以编程方式应用/删除类jQuery的

＆＃13;

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

＆＃13;

button.selected{
  color:red;
}

＆＃13;

<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>

＆＃13;

Answer 2

在Divi Theme Documentation中，它说该主题可以访问'ePanel'，它也有一个'整合'部分。

您应该可以添加此代码：

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

进入“积分”标签下的“将代码添加到博客头部”框中，这样可以让jQuery正常工作。

然后，您应该能够根据自己的需要为自己的课程设计风格。

Answer 3

我把它弄清楚了。简单，有效 NO 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}

希望它有所帮助!!

Answer 4

尽管这个问题是很久以前提出的，但由于前端发展迅速，我想就我的情况留下自己的答案。我正在vuejs中构建应用程序，并且在单击按钮时也需要活动类。我有3个按钮和2个选择选项。单击开头的三个按钮之一时，该按钮处于活动状态。但是，当您单击选择选项时，它会消失。另外，安装（编译）模板后，我需要All按钮处于活动状态。

这是我在上面和互联网上使用答案所做的工作。我分别添加了类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
  }

我知道这不是完美的代码样式，但是它对我有用。希望将来对其他人有帮助。

如何保持：单击按钮后激活css样式

4 个答案:

CSS

Javascript / jQuery