SOURCE

// 获取父元素
const parentEle = document.querySelector(".independent")
// 渲染页面
const firstLayer = ["智慧安防", "智慧出入", "智慧楼控", "信息发布"]
let html = ""
for (let i = 0; i < firstLayer.length; i++) {
    const text = firstLayer[i]
    html += `<div>${text}</div>`
}
parentEle.innerHTML = html
// 处理联动逻辑：选中、切换[, 悬浮样式使用hover即可]
function handleActionInteraction(ele, selectClass, normalClass) {
    if (!ele || !selectClass || !normalClass) { return false }
    const preEle = document.querySelector(`.${selectClass}`);
    // 切换：如果存在已选中元素, 将元素状态重置
    if (preEle) {
        const preClass = preEle.classList;
        preClass.remove(selectClass)
        preClass.add(normalClass)
    }
    // 给当前选中元素添加选中状态
    const { classList } = ele;
    classList.contains(normalClass) && classList.remove(selectClass)
    classList.add(selectClass)
}

<div class="independent">
    
</div>

.independent>div {
    padding: 5px;
    border: 1px solid blue;
}