在所选选项卡中添加粘性边框

Question

HTML

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'rwaea')">روايات</button>
  <button class="tablinks" onclick="openCity(event, '3am')">ثقافة عامة</button>
</div>

<div id="rwaea" class="tabcontent"></div>

<div id="3am" class="tabcontent">
  <p>Paris is the capital of France.</p> 
</div>

CSS

.tab {
  font-family:sans-serif;
  line-height:24px;
  margin-left:5px;
  overflow: hidden;
  border: 0px;
  background-color: #F0E6E7;
  width:50%;  
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 0px;
  width:200px;
  border-bottom:2px solid lightgrey;
  font-family: Sans-Serif;
  font-size: 20px;
  line-height:24px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
  border-bottom:2px solid #ca1515 ;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

我的代码工作正常，但是有一个功能要添加到我的网站，但我不知道如何。我有两个标签，我想在选择的标签上添加边框，我录制视频以解释我要做什么，请检查视频以了解我的意思，所选标签上有橙色边框，我想将此属性添加到我的标签中check the video

Answer 1

为了做您想做的事，您应该使用javascript。

const tabs = document.querySelectorAll(".tab");
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    const current = document.querySelector('.tab.active');
    current.classList.remove('active');
    this.classList.add("active");
  })
})

.flex {
  flex-flow: row nowrap;
  align-items: center;
}

.tab {
  display: inline-block;
  border: none;
  margin: 0 20px;
  border-bottom: 4px solid transparent;
  outline: none;
  cursor: pointer;
}

.tab.active {
  border-bottom-color: orange;
}

<ul class="flex">
  <li class="tab active">Tab 1</button>
  <li class="tab">Tab 2</button>
  <li class="tab">Tab 3</button>
</ul>

希望它能回答您的问题！