kkc-go/file/static/FooterBar.tmpl

<div class="footer-interval"></div>
<div class="footer-bar">
    <div class="footer-item" data-value="/" {{if eq .footerType "home"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
        <div class="footer-item-img"><img src="/api/static/image/bar/home{{if eq .footerType "home"}}_dark{{- end}}.svg"/></div>
        <div class="footer-item-text">首页</div>
    </div>
    <div class="footer-item" data-value="/category" {{if eq .footerType "category"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
        <div class="footer-item-img"><img src="/api/static/image/bar/other{{if eq .footerType "category"}}_dark{{- end}}.svg"/></div>
        <div class="footer-item-text">分类</div>
    </div>
    <div class="footer-item" data-value="/user" {{if eq .footerType "user"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
        <div class="footer-item-img" ><img src="/api/static/image/bar/user{{if eq .footerType "user"}}_dark{{- end}}.svg"/></div>
        <div class="footer-item-text">我的</div>
    </div>
</div>
<script>
    let footerItems = document.getElementsByClassName("footer-item");
    for (let i = 0; i < footerItems.length; i++) {
        let item = footerItems[i];
        item.addEventListener("click", function () {
            if (this.style.backgroundColor) {
                return
            }
            this.style.backgroundColor = "rgba(0,0,0,0.05)";
            setTimeout(() => this.style.backgroundColor = "", 300)
            window.location.href = this.dataset.value
        })
    }
</script>