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()
}
我正在开发一个主要使用 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()
}