从Javascript中选定的选项卡捕获文本

<ul id="tabNav">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<div id="tabContent">
  <p>Content for Tab 1</p>
  <p>Content for Tab 2</p>
  <p>Content for Tab 3</p>
</div>

var tabNav = document.getElementById('tabNav');
var tabContent = document.getElementById('tabContent');

tabNav.addEventListener('click', function(event) {
  var target = event.target;
  
  // 判断点击的是否为选项卡
  if (target.tagName === 'LI') {
    // 移除其他选项卡的样式
    var activeTab = tabNav.querySelector('.active');
    activeTab.classList.remove('active');
    
    // 添加当前选项卡的样式
    target.classList.add('active');
    
    // 获取当前选项卡的索引
    var index = Array.prototype.indexOf.call(tabNav.children, target);
    
    // 获取对应的文本内容
    var content = tabContent.children[index].textContent;
    
    // 在控制台输出文本内容
    console.log(content);
  }
});