为了账号安全,请及时绑定邮箱和手机立即绑定

如何在HTML / CSS中删除所选选项卡的边框?

如何在HTML / CSS中删除所选选项卡的边框?

慕村225694 2022-09-02 21:39:54
我有用于创建水平选项卡栏的html和css,其中我有一些类和一个javascript函数,该函数根据特定选项卡的选择基本上更改选项卡:function openPage(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";}// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();body {  font-family: Arial;}/* Style the tab */.tab {  overflow: hidden;  border: 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: 14px 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: #FFFFFF;  border-bottom-color: #FFFFFF;}/* Style the tab content */.tabcontent {  display: none;  padding: 6px 12px;  border: 1px solid #ccc;  border-top: none;}/* Style the close button */.topright {  float: right;  cursor: pointer;  font-size: 28px;}.topright:hover {  color: red;}当我运行它时,它工作正常,但是要删除的所选选项卡下方有一个下划线。有没有人有这个想法,如何在所选选项卡下删除它?
查看完整描述

3 回答

?
catspeake

TA贡献1111条经验 获得超0个赞

唯一的变化是


.tab {

  overflow: hidden;

  border: 1px solid #ccc;

  border-bottom-color: transparent;

  background-color: #f1f1f1;

}


/* Style the buttons inside the tab */

.tab button {

  background-color: inherit;

  float: left;

  border-bottom: 1px solid #ccc;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

  font-size: 17px;

}


查看完整回答
反对 回复 2022-09-02
?
慕哥6287543

TA贡献1831条经验 获得超10个赞

如果我错了,请告诉我,但你想看起来像这样吗?


<html>


<head>

  <style>

    body {

      font-family: Arial;

    }

    /* Style the tab */

    

    .tab {

      overflow: hidden;

      border: 1px solid #ccc;

      border-bottom: none;

      background-color: #f1f1f1;

    }

    /* 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;

    }

    /* Change background color of buttons on hover */

    

    .tab button:hover {

      background-color: #ddd;

    }

    /* Create an active/current tablink class */

    

    .tab button.active {

      background-color: #FFFFFF;

      border-bottom-color: #FFFFFF;

    }

    /* Style the tab content */

    

    .tabcontent {

      display: none;

      padding: 6px 12px;

      border: 1px solid #ccc;

      border-top: none;

    }

    /* Style the close button */

    

    .topright {

      float: right;

      cursor: pointer;

      font-size: 28px;

    }

    

    .topright:hover {

      color: red;

    }

  </style>

</head>


<body>


  <h2>Tabs</h2>

  <p>Click on the x button in the top right corner to close the current tab:</p>


  <div class="tab">

    <button class="tablinks" onclick="openPage(event, 'Home')" id="defaultOpen">Home</button>

    <button class="tablinks" onclick="openPage(event, 'AboutUs')">AboutUs</button>

    <button class="tablinks" onclick="openPage(event, 'Careers')">Careers</button>

  </div>


  <div id="Home" class="tabcontent">

    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

    <h3>Home</h3>

    <p>Home Page.</p>

  </div>


  <div id="AboutUs" class="tabcontent">

    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

    <h3>AboutUs</h3>

    <p>AboutUs page.</p>

  </div>


  <div id="Careers" class="tabcontent">

    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

    <h3>Careers</h3>

    <p>Careers Page.</p>

  </div>


  <script>

    function openPage(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";

    }


    // Get the element with id="defaultOpen" and click on it

    document.getElementById("defaultOpen").click();

  </script>


</body>


</html>


查看完整回答
反对 回复 2022-09-02
?
忽然笑

TA贡献1806条经验 获得超5个赞

你可以像这样编写代码。

elm.style.textDecoration = "none";


查看完整回答
反对 回复 2022-09-02
  • 3 回答
  • 0 关注
  • 96 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号