如何在JavaScript中实现自适应高度的Tab选项卡？_开发测试

如何在JavaScript中实现自适应高度的Tab选项卡？

创始人

2025-02-14 01:03:55

0次

在Javascript中，可以使用以下代码实现自适应高度的Tab选项卡：，，``

javascript，function adjustTabHeight() {， const tabs = document.querySelectorAll('.tab');， const content = document.querySelectorAll('.tab-content');， let maxHeight = 0;，， content.forEach(item => {， maxHeight = Math.max(maxHeight, item.offsetHeight);， });，， tabs.forEach(item => {， item.style.height =

${maxHeight}px;， });，}，，adjustTabHeight();，window.addEventListener('resize', adjustTabHeight);，``

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

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

HTML代码

如何在JavaScript中实现自适应高度的Tab选项卡？

                              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类。

如何在JavaScript中实现自适应高度的Tab选项卡？

相关内容

热门资讯