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

如何解决Divi：如何更改单击另一个按钮的外观

我在Divi builder上有这两个按钮。我的目标是：当我单击“按钮2”时，该按钮变为橙色，而“按钮1”变为灰色，而相反。

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

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

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

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

结果：没有点击...

您能帮我实现我的最终目标吗？

解决方法

您可以尝试一下。忽略CSS，主要部分是jQuery代码。

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

添加了“ click”事件处理程序，其余内容易于理解。

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

,

请改用此方法

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

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>

,

我添加了此脚本：

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

单击按钮的效果很好（“价格”文本已成功更新），但按钮的外观没有改变...