帶你一步步設置layui的tree樹結構點擊高亮

如何點擊layui的tree後高亮該點擊，本文帶你快速設置點擊高亮。

點擊高亮最主要的是點擊，所以高亮我們需要從樹點擊開始看起。

先上tree配置

var tree = layui.tree;

tree.render({
        elem: '#category_tree',
        data: data,
        showCheckbox: false,
        id: 'tree_id',
        isJump: false,
        onlyIconControl: true,
        text: {
                none: '<div class="cate-empty">無</div>',
        },
        click: function(obj) {
                // 點擊高亮
                $(".layui-tree-set").removeClass('layui-tree-set-active');
                obj.elem.addClass('layui-tree-set-active');
        }
});

可以看到，tree點擊後obj的對象是當前node的對象加data數據，我們要做的就是根據當前的obj信息增加當前node的頂級class以確定當前node已被點擊，具體可查看配置代碼。

那麼，現在只是設置當前點擊的node加了活動的class，要怎麼來實現高亮啊？

重要的一點來了，既然已經設置了當前node的活動class，我們再寫一個css不就解決了高亮的問題了嗎。

說寫就寫，下面就是作者用到的一個css設置，具體的可以根據你的項目來設置

.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
    background: #f2f2f2;
}

截圖預覽

具體效果可以查看該項目
lake-admin-cms