html - 在所选选项卡中添加下划线粘性边框

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>

希望它能回答您的问题!