html JAVA SCRIPT中的TABS

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JAVA SCRIPT中的TABS相关的知识，希望对你有一定的参考价值。

HTML
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
  <div class="tabMain">
<!--      Buttons-->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!--      TEXT BOX-->
      
<div class="textBox">
<!--    TEXT BOX1-->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>
    <!--    TEXT BOX1-->
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>
<!--    TEXT BOX2-->
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
    <!--    TEXT BOX3-->
</div>
    </div>
</body>
</html>
CSS

button{
     border: none;
     border-bottom: 1px solid black;
     width: 150px;
     height: 110px;
     display: block;
     justify-content: space-between;
}
 .tab{
     margin-right: 50px;
}
 .textBox{
    width: 70%;
}
 .tabMain{
     display: flex;
}
 .tab button.active {
     outline: none;
     background-color:pink;
}

JS

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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

以上是关于html JAVA SCRIPT中的TABS的主要内容，如果未能解决你的问题，请参考以下文章

html BOABSTRAP中的TABS

html JAVA SCRIPT中的定时器

博客园代码

Eclipse 中的 insert spaces for tabs 设置方法

html和java script有啥联系