使用JavaScript实现自适应高度的Tab选项卡

在前端开发中，Tab选项卡是一种常见的UI组件，有时候我们需要让Tab选项卡的高度自适应内容的高度，这就需要我们使用JavaScript来实现，下面是一个简单的实例：

HTML代码

 
     London     Paris     Tokyo     
         
London
         
London is the capital city of England.
     
     
         
Paris
         
Paris is the capital city of France.
     
     
         
Tokyo
         
Tokyo is the capital city of Japan.
     
 

JavaScript代码

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

CSS代码

 .tab {     overflow: hidden; } .tab button {     background-color: inherit;     float: left;     border: none;     outline: none;     cursor: pointer;     padding: 14px 16px;     transition: 0.3s; } .tab button:hover {     background-color: #ddd; } .tab button.active {     background-color: #ccc; } .tabcontent {     display: none;     padding: 6px 12px;     border: 1px solid #ccc;     border-top: none; }

在这个例子中，我们使用了JavaScript来控制Tab选项卡的显示和隐藏，以及添加和删除active类，当点击某个按钮时，会触发openCity函数，这个函数会隐藏所有的Tab内容，然后显示对应id的内容，并给对应的按钮添加active类。

相关问题与解答

问题1：如何在点击Tab选项卡时，让其他Tab选项卡的内容也隐藏？

答：在openCity函数中，我们首先获取所有的Tab内容，然后遍历它们，将它们的display属性设置为none，这样就可以隐藏所有Tab内容了。

问题2：如何在点击Tab选项卡时，让当前Tab选项卡的内容显示出来？

答：在openCity函数中，我们通过getElementById方法获取到当前Tab选项卡的内容，然后将它的display属性设置为block，这样就可以显示当前Tab内容了。

以上就是关于“Javascript 自适应高度的Tab选项卡-javascript技巧”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!