如何让选项卡在单击时在html中保持打开状态

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

<div class="tab-content">
  <div id="content1" class="active">选项卡1的内容</div>
  <div id="content2">选项卡2的内容</div>
  <div id="content3">选项卡3的内容</div>
</div>

// 获取选项卡导航栏和内容区域的元素
var tabs = document.querySelectorAll('.tabs li');
var tabContents = document.querySelectorAll('.tab-content div');

// 监听选项卡导航栏的点击事件
tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    // 移除所有选项卡的active类
    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    
    // 隐藏所有内容区域
    tabContents.forEach(function(content) {
      content.style.display = 'none';
    });
    
    // 添加点击选项卡的active类
    this.classList.add('active');
    
    // 显示对应的内容区域
    var tabId = this.getAttribute('id');
    var content = document.querySelector('#' + tabId.replace('tab', 'content'));
    content.style.display = 'block';
  });
});

.tabs li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tabs li.active {
  background-color: #f00;
  color: #fff;
}

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

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