多tab页功能实现

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量488 收藏 1
点赞数
分类专栏： web开发过程中总结 文章标签： html tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40390762/article/details/120283517
版权 
<style type="text/css">
*{
/* -webkit-box-sizing:inherit !important; */
box-sizing:content-box !important;
}
.file-box {
   position: relative;
   width: 340px
}

.txt {
   height: 22px;
   border: 1px solid #cdcdcd;
   width: 180px;
}

.file {
   position: absolute;
   top: 53px;
   height: 33px;
   filter: alpha(opacity :   0);
   opacity: 0;
   width: 340px
}

.modal-backdrop {
  opacity: 0.2 !important;
  /* filter: alpha(opacity=0) !important; */
  filter: alpha(opacity=40)\9\0 !important;
}

.modal.fade.in{
        top:30px;
}


.modal-content {
    position: absolute;
    }
 .navigation_btn{
   width: 70px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color : #5cbdf4;
   margin-top: 50px;
   line-height: 34px;
   cursor: pointer;
 }
 
  .navigation_btn_act{
   width: 70px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #090909;
   margin-top: 50px;
   line-height: 34px;
 }
 
 .navi-f{
   float:left;
 }
 .navigation_tabs_top{
   width: 90px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color : #369fd4;
   line-height: 34px;
   cursor: pointer;
   border-right: #fff 1px solid;
 }
 
  .navigation_tabs_top_act{
   width: 90px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #090909;
    background-color : #f2f2f2;
   line-height: 34px;
   border-right: #fff 1px solid;
 }
 
</style>
<script type="text/javascript"  src="${ctx}/static/jslib/json/json2.js"></script>
<script type="text/javascript">
$(function(){
   $('#nagigationWin').modal('show');
   $('#_agree-btn').on('click',function(){
      $('#_disagree-btn').css('display','none');
      $('#_agree-btn').removeClass('navigation_btn').addClass('navigation_btn_act');
      $('#_isagree-content').css('height','400px');
      $('#navigation_tabs').css('display','block');
   });
   $('_disagree-btn').on('click',function(){
      //流程关闭
   });
   $('.navigation_tabs_top,.navigation_tabs_top_act').on('click',function(){
      $(this).parent().find('.navigation_tabs_top_act').removeClass('navigation_tabs_top_act')
      .addClass('navigation_tabs_top');
      $(this).removeClass('navigation_tabs_top')
      .addClass('navigation_tabs_top_act');
      // 实现tab切换
      if($(this).attr('id') == 'navigation_tab1_top'){
         //自己按需进行更改
      }else if($(this).attr('id') == 'navigation_tab2_top'){
         
      }else if($(this).attr('id') == 'navigation_tab3_top'){
         
      }
   });
   
});
</script>
   
</head>
<body>
   <div id="nagigationWin" class="modal fade"  aria-hidden="false"
      data-backdrop="static" style="position:absolute;height:500px;top:80px;width: 1250px;">
   <div class="modal-dialog">
      <div class="modal-content" Style="width: 950px;position: absolute !important;
      margin-left: -200px;">
         <div id='_isagree-content' style='width: 950px;height:140px;'>
            <div class='navi-f' style='width:750px;line-height: 140px;'>
               <span style='font-weight: 700;font-style: normal;font-size: 18px;
               color: #416DE5;'>
              哈哈哈哈哈哈哈哈哈啊哈哈哈哈
               </span>
            </div>
            <div class='navigation_btn navi-f' id='_agree-btn'>
               <span style='margin-left:18px;'>同意</span>
            </div>
            <div class='navigation_btn navi-f' id='_disagree-btn' style='margin-left:25px;'>
               <span style='margin-left:12px;'>不同意</span>
            </div>
            
            <!-- 隐藏内容 -->
            <div id='navigation_tabs' class='navi-f' style='width: 850px;height:230px;background-color:#f2f2f2;
                margin-left: 50px; display:none;'>
                <div id='navigation_tabs_top' style='height:34px;background-color:#369fd4;'>
                   <div id='navigation_tab1_top' class='navigation_tabs_top_act navi-f'>
                      <span style='margin-left:28px;'>喜喜</span>
                   </div>
                   <div id='navigation_tab2_top' class='navigation_tabs_top navi-f'>
                      <span style='margin-left:15px;'>啧啧</span>
                   </div>
                   <div id='navigation_tab3_top' class='navigation_tabs_top navi-f'>
                      <span style='margin-left:15px;'>呼啦啦</span>
                   </div>
                   
                </div>
               <div id='navigation_tab1'>
                  <!-- 空着 -->
               </div>
               <div id='navigation_tab2'>
                  <div id="mapGridLinkOrderDiv"
                     style="margin: 2px 20px 0px 20px; border: 0px solid;">
                     <!-- <a id ="blackLinkOrderDetail" class="fa fa-search" aria-hidden="false">步步了</a> -->
                     <table id="mapGridLinkOrderGrid"></table>
                     <div id="mapGridLinkOrderGridPager">
                     </div>
               </div>
               <div id='navigation_tab3'>
                  <!-- 客户属性的展示 -->
               </div>
            </div>
         </div>
         
      </div>
      </div>
   </div>
</body>
/jquery自己导入；之后就可以拿来即用
</html>

///还有一个版本，操作还是满骚的：

web前端中实现多标签页切换的效果_weixin_30551947的博客-CSDN博客

晴空万里藏片云
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现tab页面切换功能
12-29
效果图如下所示： wxml <scroll scroll-x=true class=ip_tab_comtainer> <view class=ip_tab_comtainer_padd> ...'ip_tab_item_s':'ip_tab_item_n'}} bindtap=onIpItemClick wx:key={{ip.id}} data-item={{ip
C# WPF 实现Tab页动态增减
DotnetNb的博客
02-12 683
Tab页面是一个很常用的控件，针对页面固定的场景，直接给Item进行数据绑定就行
WPF实现Android或IOS的Tab控件效果
lishuangquan1987的博客
06-13 2348
在手机上，我们看到干净整洁的TabControl，如下图所示： QQ的TabControl界面： 网易云的TabControl界面： 最后我用WPF实现的TabControl: 虽然虽然丑了一大节，但是但是至少也做到了外观相似啊，颜色、字体、宽度都可以自定义。 做这个控件的思路如下： 1.从Blend中找到TabControl和TabItem的XAML模版 2.
WPF 中TabItem、TabControl
Java_c#
12-07 2964
一个简单的TabItem样式。 WPF 单个触发器、多个触发器、多条件触发器 https://www.cnblogs.com/ljs0322/p/7084691.html 1、TabItem 编辑模板-> 编辑副本 TabItem 选中样式 2、TabControl 3、示例 <Grid> ...
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
BigFamer的博客
08-12 5465
最近因为项目要求，开始学习并且使用React和Ant Design框架。在前端开发过程中，遇到这样一个页面：有多个tab，每个tab下都是一个table表格来进行数据展示。但，每个table的title都是一样的，如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面，我们一起来瞧瞧。...
vue3，单页面应用打开多个tab窗口
weixin_44832362的博客
11-17 3471
vue3，单页面应用打开多个tab窗口
[WPF] 多页面程序基本跳转
诺尔的博客
04-01 4560
使用 WPF 实现较为便捷的多页面跳转.
企业级多 Tab 页需求，50 行代码就搞定！
祈澈菇凉
07-31 668
Umi@4、Ant Design Pro、多 Tabs 布局、状态保持、50 行代码、这些关键词能组合出一篇你感兴趣的文章吗？本文来自 @聪小陈 投稿，他是 umi 的核心开发人员，github 地址是：https://github.com/xiaohuoni缘由在 Umi 社区的四年多，很多交流都是在聊天窗口中进行的，并没有留下太多有价值的内容，虽然我尽量整理了部分内容...
关于多tab切换场景“增删改查”的优化方案
m0_48940868的博客
01-10 790
业务场景：（如下图所示） 【从上图可以知道，这是很常见的多tab切换场景，切换时，下面的 table数据会发生变化，而且页面的上的操作按钮也需要在当前table页完成操作】 具体业务：（如下图所示） 优化前：（究极不科学，不推荐） 由于每个table的表头字段基本都不同，最初为了图省事，就v-if了6个table，来分别展示不同的table，后端就没怎么改动，只需要前端自己判断下就行了。 这样做的后果就是：代码沉积，垃圾代码太多了，看也看得心烦，更恐怖的是，如果是6个table，那么就应该有6个编辑的
将一个页面分为多个tab页面
sancai_01的博客
07-01 373
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MGM基础活动信息页面</title> <link rel="stylesheet" type="text/css" href="../../libs/jquery/themes/default/easyui.css"> <link rel="stylesheet" type="text/cs..
【设计思考】多层级tab选项卡展示方式
设计の诗
02-29 8472
在后台管理系统的设计中，往往会遇到多层级的查询与展示。如何能更直观地展示数据，并且让用户体验更佳，是在设计过程中需要仔细考虑的问题。 举个例子 现有一个管理系统的原型图如下，共有5个层级，选择数据时，需要一层一层选择。可以看出，原型图中的tab层级虽然清晰，但视觉效果欠佳，尤其是前三层，由于都是横向选择标签，没有辨识度。 解决方法 经过一番思考和对比，确定了一个比较好的展示方式——横纵交错。如第...
微信小程序自定义tab实现多层tab嵌套功能
08-27
微信小程序非常火爆，今天脚本之家小编给大家带来的微信小程序自定义tab实现多层tab嵌套功能以及项目中遇到的问题及解决方法，感兴趣的朋友一起看看吧
js与jquery分别实现tab标签页功能的方法
10-21
主要介绍了js与jquery分别实现tab标签页功能的方法,结合实例形式对比分析了javascript与jQuery分别实现tab标签功能的操作技巧,需要的朋友可以参考下
HTML中的文档声明
小卡酷谋的博客
04-22 1017
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
Web前端开发之HTML_3
zx1026409886的博客
04-23 814
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 279
【代码】用html写一个旋转菜单。
用html画一个四叶草
liulang68的博客
04-20 981
以上是部分代码，需要请看主页加联系方式。
HTML 入门
lvshihao_的博客
04-16 1080
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 657
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
ant design pro实现tab页切换功能
09-18
### 回答1： Ant Design Pro 中实现Tab页切换功能非常简单，只需要使用 `Tabs` 和 `TabPane` 组件即可。 以下是一个基本的示例代码： ```jsx import { Tabs } from 'antd'; const { TabPane } = Tabs; function callback(key) { console.log(key); } function TabDemo() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab Pane 2 </TabPane> <TabPane tab="Tab 3" key="3"> Content of Tab Pane 3 </TabPane> </Tabs> ); } export default TabDemo; ``` 在上面的示例中，我们首先引入了 `Tabs` 和 `TabPane` 组件，然后定义了一个回调函数 `callback` 来处理切换事件。接着在 `Tabs` 中定义了三个 `TabPane`，每个 `TabPane` 都有一个唯一的 `key` 属性和对应的标签名。我们将默认激活的 `TabPane` 设置为第一个，通过 `onChange` 属性来监听切换事件并调用 `callback` 函数。 最后，我们将 `TabDemo` 组件导出，可以在其他组件中引入并使用。 ### 回答2： Ant Design Pro 是一个基于 Ant Design 设计规范的企业级中后台前端/设计解决方案，提供了丰富的组件和布局样式，使得开发者可以快速构建出美观、实用的管理系统。 要实现 tab 页切换功能，可以使用 Ant Design Pro 中提供的 Tabs 组件。使用 Tabs 组件，需要在业务组件中引入 Tabs、TabPane 组件，并通过 state 来控制当前选中的标签页。 首先，在业务组件中引入 Tabs 和 TabPane 组件： ```javascript import { Tabs } from 'antd'; const { TabPane } = Tabs; ``` 然后，使用 Tabs 组件创建标签页，并通过 state 来控制当前选中的标签页： ```javascript class MyComponent extends React.Component { state = { activeKey: '1', // 选中的标签页的 key } onChange = activeKey => { this.setState({ activeKey }); } render() { const { activeKey } = this.state; return ( <Tabs activeKey={activeKey} onChange={this.onChange}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab Pane 2 </TabPane> <TabPane tab="Tab 3" key="3"> Content of Tab Pane 3 </TabPane> </Tabs> ); } } ``` 在上面的代码中，Tabs 组件的 activeKey 属性用来设置当前选中的标签页，onChange 属性用来监听标签页切换事件。通过在 state 中保存选中的标签页的 key，并在切换标签页时更新 activeKey 的值来实现标签页的切换。 以上就是使用 Ant Design Pro 实现 tab 页切换功能的步骤。通过引入 Tabs 和 TabPane 组件，并结合 state 来控制选中的标签页，可以实现简单而实用的标签页切换功能。 ### 回答3： Ant Design Pro 是一个开箱即用的企业级中后台前端/设计解决方案，提供了丰富的组件和模板，快速搭建出符合企业需求的系统。要实现 Tab 页切换功能，需要进行以下步骤： 1. 在 Ant Design Pro 项目中，安装 react-router-dom 库，用于实现路由功能。 2. 在 src 目录下创建一个新的文件夹 pages，用于存放各个页面组件。 3. 在 pages 文件夹下创建一个新的文件，例如 TabPage.js，用于编写 Tab 页的内容。 4. 在 TabPage.js 文件中，使用 Ant Design Pro 提供的 Tabs 组件，创建一个选项卡布局。 5. 在 Tabs 组件的 TabPane 子组件中，通过编写 JSX 代码，实现各个 Tab 页的内容。 6. 在 TabPage.js 文件中，使用 react-router-dom 提供的路由功能，将 Tabs 组件与对应的 Tab 页内容进行绑定。 7. 在 src 目录下的 router.js 文件中，配置路由表，将 TabPage.js 组件与对应的路径进行映射。 8. 在 src 目录下的 menu.js 文件中，配置菜单选项，将 Tab 页添加到菜单中，作为可点击的选项。 9. 运行 Ant Design Pro 项目，在菜单中点击选项，即可实现 Tab 页的切换功能。 以上步骤中，关键点是使用 react-router-dom 进行路由配置，并将 Tabs 组件与路由进行绑定。这样点击菜单选项时，路由会发生变化，Tabs 组件会显示对应的 Tab 页内容。另外，利用 Ant Design Pro 提供的 Tabs 组件和其属性，可以对选项卡的样式、布局、切换方式等进行自定义设置，以满足实际需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值