Divi：如何在单击另一个按钮时更改按钮外观

Question

我在 Divi builder 上有这 2 个按钮。我的目标：当我点击“按钮 2”时，这个变成橙色，“按钮 1”变成灰色，反之亦然。

在按钮设置（来自构建器）中，我为这两个按钮设置了空的链接字段。但是当我点击时，我当前的网页被重新加载...

我已将此脚本添加到 Divi Theme Option > Integration > 标题中，只是为了点击第一个按钮：

jQuery(function ($) {
    $( document ).ready(function() {
        $(".button1").on("click", function(){
            event.preventDefault();
            alert("Button clicked");
        });
    });
});

对于这个按钮 1，我设置了 CSS 类：

结果：没有点击被捕获...

你们能帮我完成我的最终目标吗？

Answer 1

你可以试试这个。忽略CSS，主要是jQuery代码。

变量buttons 包含要添加此功能的元素组。

添加了“点击”事件处理程序，其余的就很容易理解了。

jQuery(function($) {
  $(document).ready(function() {
    var buttons = $(".button1").siblings().addBack();
    buttons.on("click", function() {
      $(this).addClass('orange').removeClass('gray');
      buttons.not($(this)).addClass('gray').removeClass('orange');
    });
  });
});

body {
  padding: 10px 0;
}

div {
  border: none;
  padding: 10px 20px;
  border: 2px solid rgba(0, 0, 0, 0);
  background: #eee;
  display: inline;
  cursor: default;
}

.orange {
  border: 2px solid orange;
  color: orange;
}

.gray {
  border: 2px solid gray;
  color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">Button1</div>
<div class="button2">Button2</div>
<div class="button3">Button3</div>
<div class="button4">Button4</div>

Answer 2

请试试这个，

我为边框样式创建了橙色和灰色两个类

button.orange{
  border:2px solid orange;
}
button.gray{
  border:2px solid gray;
}

然后，按钮单击事件添加灰色类并将其删除为橙色，并将同级添加到橙色并删除它的灰色。

$(this).removeClass("orange").removeClass("gray");
$(this).addClass("gray");
$(this).siblings().addClass("orange").removeClass("gray");

jQuery(function ($) {
    $( document ).ready(function() {
        $("button").on("click", function(){
            event.preventDefault();
            $(this).removeClass("gray").removeClass("orange");
            $(this).addClass("orange");
            $(this).siblings().addClass("gray").removeClass("orange");
        });
    });
});

button{
  border:none;
  padding:10px 20px;
  border-radius:8px;
  color:#111;
}
button.orange{
  border:2px solid orange;
  color:orange;
}
button.gray{
  border:2px solid gray;
  color:gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button1">Button1</button>
<button class="button2">Button2</button>

Answer 3

我已经添加了这个脚本：

jQuery(function ($) {
    
    $( document ).ready(function() {
        
        $(".button1").on("click", function(){
            event.preventDefault();
            $(".button2").removeClass('orange').addClass('gray');
            $(".button1").removeClass('gray').addClass('orange');
            $('.price').text("MOIS");
        });
        
        $(".button2").on("click", function(){
            event.preventDefault();
            $(".button1").removeClass('orange').addClass('gray');
            $(".button2").removeClass('gray').addClass('orange');
            $('.price').text("ANNÉE");
        });
    });
});

还有这个自定义 CSS：

button.orange{
  border:1px solid #efa100;
}
button.gray{
  border:1px solid #8f8f8f;
}

点击按钮工作正常（“价格”文本已成功更新），但按钮外观没有改变......