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

，可以通过以下步骤实现：

首先，创建一个包含选项卡和div的HTML结构。选项卡可以使用<ul>和<li>元素来创建，每个选项卡对应一个<div>元素。

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

使用CSS隐藏所有的<div>元素，只显示默认的<div>元素（例如，content1）。

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

#content1.default {
  display: block;
}

使用JavaScript添加事件监听器，以在选项卡点击和焦点事件上显示和隐藏<div>元素。

// 获取选项卡和内容的元素
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';
    });
  });
});

这样，当用户点击选项卡或将焦点放在选项卡上时，对应的<div>元素将显示出来；当用户将焦点从选项卡移开时，<div>元素将隐藏起来。