使用CSS隱藏所有tab頁，然后使用JavaScript給選中的元素對應ID的tab頁設置class="active"類來顯示該元素，以此實現tab切換。
如鼠標放置到shwww時，其data-id對應的屬性為#cate1，然后使用選擇器選中該id對應的元素並設置類屬性，完整demo代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.tab-index, .tab {
list-style: none;
}
.tab-index li {
display:inline-block;
border: 1px black solid;
}
/* 先隱藏所有的tab標簽元素 */
.tab ul {
display: none;
}
/* 顯示激活的（class='active'）tab標簽 */
.tab .active {
display: block;
}
</style>
<!-- tab標簽 -->
<ul class="tab-index">
<li data-id="#cate1">shwww</li>
<li data-id="#cate2">warchina</li>
<li data-id="#cate3">ldf</li>
</ul>
<!-- 詳細內容 -->
<div class="tab">
<ul id="cate1">
<li>https://www.shwww.net</li>
</ul>
<ul id="cate2">
<li>http://www.warchina.com</li>
</ul>
<ul id="cate3">
<li>https://www.ldfldf.com</li>
</ul>
</div>
<script>
// 頁面加載時，選中第一個元素並為其設置 class="active" ，使第一個元素可以顯示
document.querySelector('.tab ul:first-child').setAttribute('class', 'active'
);
// 響應事件，鼠標移動或者點擊元素時的事件處理函數
const eventHandler = function (event) {
document.querySelector('.tab .active').removeAttribute('class'); // 先將之前顯示的標簽隱藏
const targetId = event.target.dataset['id']; // 取得需要顯示的tab的 id
document.querySelector(targetId).setAttribute('class', 'active'); // 顯示該id的tab標簽
};
const elements = document.querySelectorAll('.tab-index li'); // 選中所有需要綁定響應事件的元素
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('mouseover', eventHandler); // 綁定事件處理函數
}
</script>
</body>
</html>