MS Edge 上的 CSS 边框问题

我正在尝试实现这个：https://www.w3schools.com/howto/howto_js_tabs.asp除了有额外的边框。

当我选择东京或鼠标离开巴黎时，菜单按钮侧边框使用 MS Edge 消失。它在Chrome和Firefox中完美运行。

这是我的代码：

<!DOCTYPE html>
<html>
<!-- Tabs by Aubrey Bourke 2019 -->
<head>
<style>
body{
    font-family: Sans-serif;
    background-color: white;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 16px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  /*background-color: #ddd;*/
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: white;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: white;
}

.container{
box-shadow: 2px 2px 1px 0px #eee;
width: 500px;
}
#blank{
background-color:#efefef;
cursor: default;
}
#one{
background-color:white;
}
</style>
</head>
<body onload="openCity(event, 'London')">

<div class="container">
<div class="tab">
  <button id="one" class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button id="two" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button id="three" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  <button id="blank" class="tablinks" style="width:255px; border-bottom: 1px solid #ccc;">&nbsp;</button>
</div>
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");

  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
 if(cityName=="London"){    
    <!-- One -->
    document.getElementById("one").style.backgroundColor="white";
    document.getElementById("one").style.borderRight="1px solid #ccc";
    document.getElementById("one").style.borderBottom="1px solid white";
    <!-- Two -->
        document.getElementById("two").style.borderLeft="0px solid #ccc";
    document.getElementById("two").style.borderRight="0px solid #ccc";
    document.getElementById("two").style.borderBottom="1px solid #ccc";

    <!-- Three -->
        document.getElementById("three").style.borderLeft="1px solid #efefef";
    document.getElementById("three").style.borderRight="1px solid #efefef";
    document.getElementById("three").style.borderBottom="1px solid #ccc";
}

 if(cityName=="Paris"){

    <!-- One -->
    document.getElementById("one").style.backgroundColor="#f1f1f1";
    document.getElementById("one").style.borderRight="1px solid #ccc";
    document.getElementById("one").style.borderBottom="1px solid #ccc";

    <!-- Two -->
        document.getElementById("two").style.borderLeft="1px solid #efefef";
    document.getElementById("two").style.borderRight="1px solid #ccc";
    document.getElementById("two").style.borderBottom="1px solid white";

    <!-- Three -->
        document.getElementById("three").style.borderLeft="1px solid #efefef";
    document.getElementById("three").style.borderRight="1px solid #efefef";
    document.getElementById("three").style.borderBottom="1px solid #ccc";

}
if(cityName=="Tokyo"){
    <!-- One -->
    document.getElementById("one").style.backgroundColor="#f1f1f1";
    document.getElementById("one").style.borderRight="1px solid #efefef";
    document.getElementById("one").style.borderBottom="1px solid #ccc";

    <!-- Two -->
        document.getElementById("two").style.borderLeft="1px solid #efefef";
    document.getElementById("two").style.borderRight="1px solid #ccc";
    document.getElementById("two").style.borderBottom="1px solid #ccc";
    <!-- Three -->
        document.getElementById("three").style.borderLeft="1px solid #efefef";
    document.getElementById("three").style.borderRight="1px solid #ccc";
    document.getElementById("three").style.borderBottom="1px solid white";
}

}
</script>
</body>
</html>

谁能告诉我为什么在MS Edge中将鼠标悬停在边框上后边框会消失？有什么办法可以解决这个问题吗？

好吧，这不是您问题的答案，而是一种适用于经典 Edge 和其他现代浏览器的不同方法。

我认为有更好的策略来标记和设置这些选项卡的样式，但我通常坚持使用您提供的标记。可能根本不是你要找的，但也许它可能有助于思考相关问题(例如，从 JS 中提取样式等(。

我依靠CSS来完成样式方面的繁重工作，并试图简化JavaScript，以便它做得很好。我通常回避通过JS向元素添加样式，除非我有一个特定的用例限制我这样做。这通常是很好的做法，但也许你有我不知道的理由像你那样做。

祝你好运。

    function openCity(evt, cityName) {
      var i, tabcontent;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      document.getElementById(cityName).style.display = "block";
      var toggleTabs = function (e) {
        var active = document.querySelector('.active');
        if (active) {
          active.classList.remove('active');
        }
        e.currentTarget.classList.add('active');
      }
      var tablinks = document.querySelectorAll(".tablinks");
      var tablinksSet = Array.from(tablinks);
      tablinksSet.forEach(function (item) {
        item.addEventListener('click', function (e) {
          toggleTabs(e);
        })
      })
    }

 body {
      font-family: Sans-serif;
      background-color: white;
    }
    /* Style the tab */
    .tab {
      position: relative;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc #ccc transparent #ccc;
      background-color: #f1f1f1;
    }
    /* Style the buttons inside the tab */
    .tab button {
      background-color: inherit;
      float: left;
      margin-top: -1px;
      border: 1px solid transparent;
      outline: none;
      cursor: pointer;
      padding: 16px 16px;
      transition: 0.3s;
      font-size: 17px;
      border-bottom: 1px solid #f1f1f1;
      border-top: 1px solid #ccc;
    }
    /* Change background color of buttons on hover */
    .tab button:hover {
      /*background-color: #ddd;*/
    }
    /* Create an active/current tablink class */
    .tab button.active {
      position: relative;
      background-color: white;
      border: 1px solid #ccc;
      border-bottom-color: white;
    }
    .tab button.active::after {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 2px;
      bottom: -2px;
      left: 0;
      background-color: white;
      z-index: 50;
    }
    .tab button:first-child {
      margin-left: -1px;
    }
    .tab button:not(.active):first-child {
      border-left-color: #ccc;
    }
    .tabcontents {
      width: 500px;
      float: left;
    }
    /* Style the tab content */
    .tabcontent {
      position: relative;
      z-index: 1;
      display: none;
      padding: 6px 12px;
      margin-top: -1px;
      background-color: white;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc #ccc #ccc #ccc;
    }
    .cf:before,
    .cf:after {
      content: " ";
      display: table;
    }
    .cf:after {
      clear: both;
    }
    .container {
      width: 500px;
    }

<!DOCTYPE html>
<html>
<head></head>
<body onload="openCity(event, 'London')">
  <div class="container">
    <div class="tab cf">
      <button id="one" class="tablinks active" onclick="openCity(event, 'London')">London</button>
      <button id="two" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button id="three" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    <div class="tabcontents">
      <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
      </div>
      <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
      </div>
      <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>
    </div>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：