在选项卡和onFocus上显示div并在onBlur上隐藏

<ul>
  <li id="tab1">选项卡1</li>
  <li id="tab2">选项卡2</li>
  <li id="tab3">选项卡3</li>
</ul>

<div id="content1">内容1</div>
<div id="content2">内容2</div>
<div id="content3">内容3</div>

#content1, #content2, #content3 {
  display: none;
}

#content1.default {
  display: block;
}

// 获取选项卡和内容的元素
var tabs = document.querySelectorAll('li');
var contents = document.querySelectorAll('div');

// 为选项卡添加点击事件监听器
tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    // 隐藏所有的内容
    contents.forEach(function(content) {
      content.style.display = 'none';
    });

    // 显示对应的内容
    var contentId = this.id.replace('tab', 'content');
    document.getElementById(contentId).style.display = 'block';
  });
});

// 为选项卡添加焦点事件监听器
tabs.forEach(function(tab) {
  tab.addEventListener('focus', function() {
    // 隐藏所有的内容
    contents.forEach(function(content) {
      content.style.display = 'none';
    });

    // 显示对应的内容
    var contentId = this.id.replace('tab', 'content');
    document.getElementById(contentId).style.display = 'block';
  });
});

// 为选项卡添加失焦事件监听器
tabs.forEach(function(tab) {
  tab.addEventListener('blur', function() {
    // 隐藏所有的内容
    contents.forEach(function(content) {
      content.style.display = 'none';
    });
  });
});