切换tab动态加载不同的html页面,关于tab的切换之共用html页面,而引发的页面跳转错乱问题...

在一个项目中的同一个模块中,有多个tab(并且多个tab对应的页面结构完全一样),tab的每次切换,不同tab调用不同的接口,利用一个switch进行判断,根据当前的类型去调用不同的接口,返回不同数据了,实现页面数据的刷新,

这样做的目的是为了减少html页面的重复,实现代码的复用...........................

(存在的问题,每次的页面刷新,只是数据的刷新,url没有进行更新,这会导致一个问题,那就是点击浏览器刷新页面的时候,不能记录当前的状态,每次都会返回到最初的页面,而不能记录当前的位置,有可能发生页面跳转错乱的问题)

存在弊端的代码展示:

html:每次的tab切换,都会调用get_list()方法,这个方法会传递一个类型过去用于做判断

裁判文书

行业会议

老李说知产

人才报告

资讯

js:ctrl/consult.js文件(利用angular-require的方法将多个小控制器放入一个文件中)

define(['app', 'services/filter', 'services/setting', 'api/news_api', 'services/common', 'directives/showimg/showimg', 'directives/sharecomponent/sharecomponent'], function (myapp) {

myapp.controller('news_list', ['

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 并没有提供页面切换 tab 的功能,但可以通过结合 CSS 和 JavaScript 实现该效果。以下是一个示例: HTML 代码: ```html <div class="tab-container"> <div class="tab-header"> <div class="tab-item active" data-tab="tab1">Tab 1</div> <div class="tab-item" data-tab="tab2">Tab 2</div> <div class="tab-item" data-tab="tab3">Tab 3</div> </div> <div class="tab-content"> <div class="tab-pane active" data-tab="tab1"> <p>Content for Tab 1 goes here.</p> </div> <div class="tab-pane" data-tab="tab2"> <p>Content for Tab 2 goes here.</p> </div> <div class="tab-pane" data-tab="tab3"> <p>Content for Tab 3 goes here.</p> </div> </div> </div> ``` CSS 代码: ```css .tab-container { width: 100%; height: 100%; position: relative; } .tab-header { display: flex; width: 100%; justify-content: center; align-items: center; } .tab-item { font-weight: bold; padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; } .tab-item.active { border-bottom: none; } .tab-content { position: absolute; top: 50px; left: 0; width: 100%; height: calc(100% - 50px); } .tab-pane { display: none; height: 100%; padding: 20px; } .tab-pane.active { display: block; } ``` JavaScript 代码: ```javascript const tabItems = document.querySelectorAll('.tab-item'); const tabPanes = document.querySelectorAll('.tab-pane'); tabItems.forEach(item => { item.addEventListener('click', () => { const activeTab = item.dataset.tab; tabItems.forEach(item => item.classList.remove('active')); tabPanes.forEach(pane => pane.classList.remove('active')); item.classList.add('active'); document.querySelector(`[data-tab="${activeTab}"]`).classList.add('active'); }); }); ``` 以上代码实现了一个简单的滑动页面切换 tab,你可以根据自己的需求进行修改和定制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值