<AI>
複数の ul 要素がある場合、選択した li 要素によって UI を切り替えるには、
イベント委任（親要素でのイベント監視）を使い、li 要素に設定した data-* 属性などの目印を読み取って処理を分岐させます。
具体的な手順は以下の通りです。
親（または共通の親）にイベントリスナーを登録する
クリックされたターゲットが li かどうかを判定する
data-* 属性の値を取得して UI を切り替える

実装のコード例
HTMLとJavaScriptを次のように書きます。

html

<ul class="menu-list" data-group="first">
  <li data-target="ui-1">UI 1にする</li>
  <li data-target="ui-2">UI 2にする</li>
</ul>

<ul class="menu-list" data-group="second">
  <li data-target="ui-3">UI 3にする</li>
</ul>


<div id="ui-1" class="ui-panel">ここが UI 1 です</div>
<div id="ui-2" class="ui-panel" style="display:none;">ここが UI 2 です</div>
<div id="ui-3" class="ui-panel" style="display:none;">ここが UI 3 です</div>

javascript
// すべての .ui-panel を隠す関数
function hideAllPanels() {
  const panels = document.querySelectorAll('.ui-panel');
  panels.forEach(panel => {
    panel.style.display = 'none';
  });
}

// ドキュメント全体、または共通の親要素でクリックを監視
document.addEventListener('click', (event) => {
  // クリックされた要素が li かチェック
  const li = event.target.closest('li');
  if (!li) return; // li 以外なら何もしない

  // li に設定された data-target の値を取得
  const targetId = li.getAttribute('data-target');
  if (!targetId) return;

  // すべての UI を非表示にしてから、対象だけを表示
  hideAllPanels();
  const targetPanel = document.getElementById(targetId);
  if (targetPanel) {
    targetPanel.style.display = 'block';
  }
});

ポイント
event.target.closest('li'): li の中に別のタグ（span や a など）があっても、正しく li を見つけることができます。
data-target 属性: どの UI を表示すればよいかを li ごとに指定できるため、複数の ul があっても簡単に管理できます。