时间戳

首页 > 解决方案 > Onsen UI Tabbar 选项卡在之前单击时无法通过按钮检查

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

问题描述

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

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

当我单击（例如）tab2（我在 tab2 页面上）时出现问题，然后单击 Next 按钮（tab3 页面），然后单击 Prev 按钮返回，tab2 页面按原样加载，但 tab3 标签似乎仍然被选中（即使在 HTML 源代码中它不是，tab2 也被选中）。
简而言之，我之前单击的每个选项卡都无法在 HTML 中进行检查。除非单击选项卡，否则“已检查”属性（由“下一个/上一个”按钮使用）起作用，就像有一些属性覆盖它一样。在 HTML 源代码中，当我单击这些元素时，它们没有发生任何变化，Chrome 调试器中根本看不到任何变化。

我只需要能够通过 JavaScript 以与直接单击它们相同的方式检查这些选项卡。

以下是 HTML 中的选项卡以及 Next 和 Prev 按钮的功能：

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 函数中使用它吗？

谢谢你的帮助。

标签： javascripthtmlcssonsen-ui

解决方案

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

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

推荐阅读