u-tabs实现订单页面,在其他页面传参光标对应
时间: 2024-02-11 14:06:06 浏览: 32
好的,那我来具体介绍一下u-tabs在订单页面中如何实现在其他页面传参时光标对应。
假设我们有一个订单页面,其中有三个tab分别对应三个订单信息的输入框。我们可以在其他页面中传入一个参数,告诉订单页面需要显示哪个订单的输入框,并将光标自动聚焦在该输入框中。具体实现步骤如下:
1. 在订单页面中,给每个tab的输入框添加一个id,方便我们在其他页面中获取该元素。
```html
<u-tabs id="orderTabs">
<u-tab title="订单1">
<input type="text" id="order1Input" name="order1Input">
</u-tab>
<u-tab title="订单2">
<input type="text" id="order2Input" name="order2Input">
</u-tab>
<u-tab title="订单3">
<input type="text" id="order3Input" name="order3Input">
</u-tab>
</u-tabs>
```
2. 在其他页面中,传入需要显示的订单的参数值,并将其存储在sessionStorage中。
```javascript
// 假设需要显示的订单是订单2
sessionStorage.setItem("activeTab", "订单2");
```
3. 在订单页面中,获取sessionStorage中存储的参数值,并根据该参数值激活对应的tab,并将光标聚焦在对应的输入框中。
```javascript
// 获取sessionStorage中存储的参数值
const activeTab = sessionStorage.getItem("activeTab");
// 激活对应的tab
const orderTabs = document.getElementById("orderTabs");
const tabs = orderTabs.querySelectorAll("u-tab");
tabs.forEach((tab, index) => {
if (tab.title === activeTab) {
orderTabs.activeIndex = index;
}
});
// 将光标移动到对应的输入框中
const input = document.getElementById(`${activeTab}Input`);
input.focus();
```
这样,在其他页面中传入需要显示的订单参数时,订单页面就可以根据参数值自动激活对应的tab,并将光标聚焦在对应的输入框中,实现了在其他页面传参光标对应的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)