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

在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代码

 <div class="tab">     <button class="tablinks" onclick="openCity(event, 'London')">London</button>     <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>     <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>     <div id="London" class="tabcontent">         <h3>London</h3>         <p>London is the capital city of England.</p>     </div>     <div id="Paris" class="tabcontent">         <h3>Paris</h3>         <p>Paris is the capital city of France.</p>     </div>     <div id="Tokyo" class="tabcontent">         <h3>Tokyo</h3>         <p>Tokyo is the capital city of Japan.</p>     </div> </div>

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技巧”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!