Onsen UI Tabbar 选项卡在之前单击时无法通过按钮检查

Onsen UI Tabbar tab cannot be checked by button when previously clicked

我正在开发一个主要使用 JavaScript 和 HTML 的 Electron 应用程序。该应用程序有一个顶部导航栏,其中存储了该应用程序的所有页面(选项卡)(有点像您的网络浏览器,但选项卡是固定的并且导航栏在 100% 宽度上拉伸)。

在页脚处有两个按钮,如果可用,它们会为您提供 left/right 上的下一个选项卡(上一个和下一个按钮)。 您也可以在选项卡本身上单击鼠标右键以获得相同的结果,因此您可以使用这两个选项之一。

当我点击(例如)tab2(我在 tab2 页面)时出现问题,然后我点击 Next 按钮(tab3 页面),然后点击 Prev 按钮返回,tab2 页面加载时应该,但 tab3 标签似乎仍然被选中(即使在 HTML 源中它不是,tab2 被选中)。
简而言之,我之前单击的每个选项卡都无法在 HTML 中选中。除非单击选项卡,否则属性 'checked'(由 Next/Prev 按钮使用)有效,就像有一些属性覆盖它一样。 在 HTML 源代码中,当我单击这些元素时,它们没有发生任何变化,在 Chrome 调试器中根本看不到任何变化。

我只需要能够通过 JavaScript 检查这些选项卡,就像直接单击它们一样。

这是 HTML 中的选项卡以及我的“下一个”和“上一个”按钮的功能:

function next_tab() {
  const labels = document.getElementsByClassName('tabbar__item tabbar--top-border__item')
  const current_tab = document.getElementById('main-iframe').src.replace(/^.*[\\/]/, '')
  let i
  for (i = 0; i < labels.length; i++) {
    if (labels[i].id == current_tab) {
      let next_tab = labels[i + 1]
      if (next_tab) {
        check_new_tab(next_tab, labels[i])
        return next_tab.id
      } else {
        return null
      }
    }
  }
}
function prev_tab() {
  const labels = document.getElementsByClassName('tabbar__item tabbar--top-border__item')
  const current_tab = document.getElementById('main-iframe').src.replace(/^.*[\\/]/, '')
  let i
  for (i = labels.length - 1; i >= 0; i--) {
    if (labels[i].id == current_tab) {
      let prev_tab = labels[i - 1]
      if (prev_tab) {
        check_new_tab(prev_tab, labels[i])
        return prev_tab.id
      } else {
        return null
      }
    }
  }
}
/**makes the newly selected tab clicked (when it's been switched on to through next/previous buttons)*/
function check_new_tab(new_tab, old_tab) {
  old_tab.children[0].removeAttribute('checked')
  new_tab.children[0].setAttribute('checked', 'checked')
}
<div id="header" class="tabbar tabbar--top tabbar--top-border">

  <label class="tabbar__item tabbar--top-border__item" id='01.html'
    onclick="window.preload.send('switch-tabs-req', '01.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;" checked="checked">
    <button class="tabbar__button tabbar--top-border__button">
      Cloud selection
    </button>
  </label>

  <label class="tabbar__item tabbar--top-border__item" id="02.html"
    onclick="window.preload.send('switch-tabs-req', '02.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;">
    <button class="tabbar__button tabbar--top-border__button">
      Retailer data volumes
    </button>
  </label>

  <label class="tabbar__item tabbar--top-border__item" id="03.html"
    onclick="window.preload.send('switch-tabs-req', '03.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;">
    <button class="tabbar__button tabbar--top-border__button">
      Database size
    </button>
  </label>

</div>

是否有一些我找不到的隐藏属性或设置? 我能否以某种方式覆盖它,以便在 next_tab/prev_tab 函数中使用它?

感谢您的帮助。

好吧,我想通了。基本上函数 check_new_tab() 应该是这样的:

function check_new_tab(new_tab) {
  new_tab.click()
}