Переопределить нижнюю границу родителя

Question

Я пытаюсь создать простые вкладки, и моя цель состоит в том, чтобы выделить текущую вкладку красной рамкой. По умолчанию у моего родительского div есть серая рамка. То, чего я пытаюсь достичь, это красная граница выбранной кнопки должна переопределить серую:

.tab {
  width: 150px;
  border-bottom: 2px solid red;
}

.tabs {
  width: 1000px;
  padding-bottom: 18px;
  border-bottom: 2px solid grey;
}

<div class="tabs">
  <button class="tab">New</button>
  <button class="tab">Archive</button>
</div>

Есть ли способ, которым я могу достичь этого без изменения структуры?

Answer 1

Я предлагаю вам дать класс selected с правильным свойством и переключаться с js

на PO C:

const tabs = document.querySelectorAll(".tab");

document.addEventListener("click", (e) => {
  if (e.target.classList.contains("tab")) {
    for (const tab of tabs) {
      tab.classList.remove("selected");
    }
    e.target.classList.add("selected");
  }
});

.tab {
  width: 150px;
  border-bottom: 2px solid grey;
}

.tab.selected {
  border-bottom: 2px solid red;
}

.tabs {
  width: 1000px;
  padding-bottom: 18px;
}

<div class="tabs">
  <button class="tab selected">New</button>
  <button class="tab">Archive</button>
</div>

Answer 2

Немного изменили код для вкладок, чтобы показать активное и неактивное состояние. Пожалуйста, посмотрите на код ниже.

$(document).ready(function(){
  $('.tab.active').parent().addClass('tab-active');
  $('.tab').click(function(){
    $('.tab').removeClass('active');
    $(this).addClass('active')
  });
});

.tab {
  width: 150px;
  border-bottom: 2px solid grey;
}
.tab.active,.tabs.tab-active {
  border-bottom-color: red;
}
.tabs {
  width: 1000px;
  padding-bottom: 18px;
  border-bottom: 2px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
  <button class="tab active">New</button>
  <button class="tab">Archive</button>
</div>

Answer 3

Если вам не нужна поддержка Edge и IE, используйте focus:within:

.tab {
  width: 150px;
  border-bottom: 2px solid red;
}
.tabs {
  width: 1000px;
  padding-bottom: 18px;
  border-bottom: 2px solid grey;
}

.tabs:focus-within {
  border-color: red;
}

<div class="tabs">
  <button class="tab">New</button>
  <button class="tab">Archive</button>
</div>