添加多标签后，动态修改Tab高度的CSS/JS代码失效问题

问题根源 #

你的JS代码里获取当前Tab内容的逻辑只适配了2个Tab的场景：

const currentTab = index === 0 ? document.querySelector(`#tab div`) : document.querySelector(`#tab div + div`)

这段代码的逻辑是：点击第一个按钮（index=0）取第一个div，点击其他按钮都取第二个div。所以点击Tab3（index=2）时，依然取的是第二个div的高度，自然不会更新到第三个Tab的实际高度。

修复步骤 #

1. 替换Tab内容获取逻辑：用document.querySelectorAll('#tab div')获取所有Tab内容容器，再通过index直接定位到当前激活的容器。
2. 优化DOM获取：缓存tab元素，避免重复调用getElementById，提升性能。
3. 初始化逻辑同步调整：确保初始高度也是取第一个Tab内容的高度（和后续逻辑统一）。

修改后的完整代码 #

JavaScript #

// 缓存tab元素，避免重复DOM查询
const tabEl = document.getElementById('tab');
// 初始化高度：取第一个Tab内容的高度
const tabContents = document.querySelectorAll('#tab div');
tabEl.style.height = tabContents[0].getBoundingClientRect().height + 'px';

const btns = Array.from(document.getElementsByTagName('button'));
btns.forEach((item, index) => {
  item.addEventListener('click', function() {
    // 移除所有按钮的active类
    btns.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    item.classList.add('active');
    // 设置当前tab索引
    tabEl.setAttribute('data-tab', index);
    
    // 获取当前激活的Tab内容容器
    const currentTab = tabContents[index];
    // 更新tab高度为当前内容的高度
    tabEl.style.height = currentTab.getBoundingClientRect().height + 'px';
  });
});

CSS #

.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
}
.active {
 color: blue;
}
.tabs > * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {
    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 1rem;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
}

HTML #

<div class="wrapper">
  
      <button> Tab 1</button>
       <button> Tab 2</button>
       <button> Tab3</button>
        
    <div id="tab" class="tabs inliner">
        <div>
            <h2>Content 1 </h2>
        
        </div>
        <div>
            <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam    </h2>
       
        </div>
        <div> <h3>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</h3>
        </div>
    </div>
</div>
<p>The Height of this text does not keep changing dynamically when clicking Tab no3</p>

内容的提问来源于stack exchange，提问作者CcCcSS