在另一个div类上时，我的border-bottom不会消失

如何解决在另一个div类上时，我的border-bottom不会消失

我有一个问题。我有一个带有按钮的过滤功能。我有下面正在处理的代码。问题是，当按钮处于活动状态时，我想要的是边框底部的颜色更改颜色。在我创建的代码中，当它处于活动状态时，我设法提供了一个条件。但是当我选择另一个按钮时，上一个按钮中的边框底部不会被完美移除。

我希望活动按钮的底部边框为laterTs TIMESTAMP(3),earlierTs TIMESTAMP(3),，非活动按钮的底部边框为#0f0f0f。丢失的代码在哪里或我的代码在哪里？

#FAFAFA

$(document).ready(function(){
    $('.list-content').css('display','none');
    $('.all').show();
    $('button').on("click",function(){
        let target = $(this).data('target');
      let content = $('.list-content').data('content');
      
      console.log(target);
      
      $('li#' + target).addClass('active');
      $('.list-content').hide(); 
      $('.' + target).show();
  });
});

body{
  background-color:#CACACA;
}

.list-tag ul{
  display:flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-tag ul li{
  border-bottom: 1px solid #FAFAFA;
}

.list-tag ul li.active{
  border-bottom: 1px solid #0f0f0f;
}

button{
  padding:5px 10px;
  border:none;
  background:transparent;
  boder-bottom:1px solid red;
  cursor:pointer;
}

button:focus{
  outline:none;
  Box-shadow:none;
}

.content{
  margin-top:20px;
}

解决方法

我不会将下边框放在li-element上，因为它永远不会具有焦点状态，这是一个将边框应用于按钮本身的示例。也许这对您有用：

$(document).ready(function(){
    $('.list-content').css('display','none');
    $('.all').show();
    $('button').on("click",function(){
        let target = $(this).data('target');
      let content = $('.list-content').data('content');
      
      console.log(target);
      
      $('li#' + target).addClass('active');
      $('.list-content').hide(); 
      $('.' + target).show();
  });
});

body{
  background-color:#CACACA;
}

.list-tag ul{
  display:flex;
  list-style: none;
  padding: 0;
  margin: 0;
}



button{
  padding:5px 10px;
  border:none;
  background:transparent;
  border-bottom:1px solid #FAFAFA;
  cursor:pointer;
}

button:focus{
  outline:none;
  box-shadow:none;
  border-bottom: 1px solid #0f0f0f;
}

.content{
  margin-top:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="list-tag">
      <ul>
        <li id="all">
          <button data-target="all"> All</button>
        </li>
        <li id="tech">
          <button data-target="tech">Tech</button>
        </li>
        <li id="industry">
          <button data-target="industry">Industry</button>
        </li>
        <li id="edu">
          <button data-target="edu">Education</button>
        </li>
      </ul>
    </div>

    <div class="content">
      <div class="list-content all" id="all">Lorem ipsum All.</div>
      <div class="list-content all" id="all">Lorem ipsum All.</div>
      <div class="list-content all" id="all">Lorem ipsum All.</div>
      <div class="list-content all" id="all">Lorem ipsum All.</div>
      
      <div class="list-content tech" id="tech">Lorem ipsum Tech.</div>
      <div class="list-content tech" id="tech">Lorem ipsum Tech.</div>
      <div class="list-content tech" id="tech">Lorem ipsum Tech.</div>
      <div class="list-content tech" id="tech">Lorem ipsum Tech.</div>
      
      <div class="list-content industry" id="industry">Lorem ipsum Industry.</div>
      <div class="list-content industry" id="industry">Lorem ipsum Industry.</div>
      <div class="list-content industry" id="industry">Lorem ipsum Industry.</div>
      <div class="list-content industry" id="industry">Lorem ipsum Industry.</div>
      
      <div class="list-content edu">Lorem ipsum Edu.</div>
      <div class="list-content edu">Lorem ipsum Edu.</div>
      <div class="list-content edu">Lorem ipsum Edu.</div>
      <div class="list-content edu">Lorem ipsum Edu.</div>
    </div>

请注意：在您的原始代码中，按钮的“边框底部”有错字“底部”

,

$(document).ready(function(){
    $('.list-content').css('display',function(){
        let target = $(this).data('target');
      let content = $('.list-content').data('content');
      
      console.log(target);
      $('li.active').removeClass('active'); // You need to add this line so that it can remove border from active item.
      $('li#' + target).addClass('active');
      $('.list-content').hide(); 
      $('.' + target).show();
  });
});

,

您需要在单击其他按钮时从上一个li中删除活动的类。

想到这两种方法。

    $('.list-content').css('display',function() {
        let target = $(this).data('target');
        let content = $('.list-content').data('content');

        console.log(target);

        // Add one of these
        // 1. $('li.active').removeClass('active') OR 
        // 2. $(`li:not(#${target})`).removeClass('active')
        $('li#' + target).addClass('active');
        $('.list-content').hide(); 
        $('.' + target).show();
    });
});