在选项卡中显示javascript对象

<ul class="tabs">
  <li class="tab active" data-tab="tab1">Tab 1</li>
  <li class="tab" data-tab="tab2">Tab 2</li>
  <li class="tab" data-tab="tab3">Tab 3</li>
</ul>
<div class="tab-content">
  <div id="tab1" class="content active"></div>
  <div id="tab2" class="content"></div>
  <div id="tab3" class="content"></div>
</div>

.tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
}

.tab-content .content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

.tab-content .content.active {
  display: block;
}

// 获取选项卡元素和内容元素
var tabs = document.getElementsByClassName('tab');
var contents = document.getElementsByClassName('content');

// 绑定点击事件
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    // 切换选项卡的激活状态
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
    }
    this.classList.add('active');
    
    // 切换内容的显示
    var tabId = this.getAttribute('data-tab');
    for (var k = 0; k < contents.length; k++) {
      contents[k].classList.remove('active');
    }
    document.getElementById(tabId).classList.add('active');
  });
}

// 在选项卡中显示JavaScript对象
var data = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};

var tabContent = document.getElementById('tab1');
tabContent.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';