Question

我正在尝试实现这一点： 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中将鼠标悬停在边框上后边框会消失吗？有什么办法可以解决这个问题？

Answer 1

嗯，不是您问题的答案，而是一种在经典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>

MS Edge上的CSS边框问题

1 个答案: