亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在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 關注
  • 117 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號