如何通过JavaScript函数禁用OpenLayers集成的sidebar-v2面板项？

你之前的代码未生效，核心问题有两个：

1. 目标<a>标签未设置id="messages"，document.getElementById("messages")无法找到对应元素；
2. sidebar-v2 的禁用状态是给**<li>标签**添加disabled类，而非<a>标签。

以下是两种可行的解决方法：

方法一：给目标 li 添加 ID 直接操作 #

先修改 HTML，给对应<li>加上 ID：

<div class="sidebar-tabs">
    <ul role="tablist">
       <li id="messages-tab"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
    </ul>          
</div>

再编写触发禁用的 JS 代码：

// 点击按钮时执行的函数
function disableMessagesTab() {
    document.getElementById("messages-tab").classList.add("disabled");
}

方法二：通过选择器定位元素（无需修改 HTML） #

利用 CSS 选择器找到目标<a>标签，再获取其父元素<li>进行操作：

// 点击按钮时执行的函数
function disableMessagesTab() {
    const messagesTab = document.querySelector('a[href="#messages"]').parentElement;
    messagesTab.classList.add("disabled");
}

补充：切换禁用/启用状态 #

如果需要点击按钮时在禁用和启用状态间切换，可使用toggle方法替代add：

function toggleMessagesTab() {
    const messagesTab = document.querySelector('a[href="#messages"]').parentElement;
    messagesTab.classList.toggle("disabled");
}

内容的提问来源于stack exchange，提问作者user12538529