Divi: как изменить внешний вид кнопки при нажатии другой

Question

У меня на Divi builder есть эти 2 кнопки. Моя цель: когда я нажимаю на "кнопку 2", эта становится оранжевой, а "кнопка 1" становится серой, и наоборот.

При настройке кнопки (из конструктора) я установил пустое поле Link для этих 2 кнопок. НО, когда я нажимаю, моя текущая веб-страница перезагружается...

Я добавил этот скрипт в заголовок 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

Я добавил этот скрипт:

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

Нажатие на кнопки работает нормально (текст "цена" обновляется успешно), НО внешний вид кнопки не меняется...

Answer 3

Пожалуйста, попробуйте это вместо этого,

Я создал два класса оранжевого и серого для стиля границы

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>