导航条多个tab切换,实现筛选效果

本文介绍了如何利用HTML和JavaScript实现导航条上的多个tab切换效果,通过data-自定义属性来控制筛选显示的内容,详细讲解了html结构、js代码以及最终的显示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现该效果的核心是使用data-**的自定义属性
html导航条代码

<ul class="tab">
    <li data-type="all">全部</li>
    <li data-type="welfare">福利</li>
    <li data-type="system">制度</li>
    <li data-type=" management">管理</li>
    <li data-type="others">其他</li>
</ul>

html导航条下面的显示模块的代码

<div class="model" name="all"></div>
<div class="model" name="welfare"></div>
<div class="model" name="system"></div>
<div class="model" name="management"></div>
<div class="model" name="others"></div>

js代码:

$('.tab li').click(function() {
    var showTab = $(this).data('type');  //敲黑板,这部分是重点,获取当前自定义属性
    $('.model').addClass('none');        //不符合属性的隐藏
    $('.model[name='+showTab+']').removeClass('none');//符合属性的显示(利用属性选择器)}
});

显示效果
这里写图片描述

用python做一个电脑win10的软件。 1.界面风格简洁现代,主色调为浅灰和白色,辅以蓝色和绿色点缀,突出操作重点,提升视觉舒适度。 界面元素间距充足,按钮和输入框大小适中,适合鼠标操作和快捷键使用。 顶部或侧边设有明显的步骤导航条,清晰展示当前流程阶段,支持点击返回上一步修改。 支持高分辨率显示,界面响应流畅。 常驻命令设置和操作历史区域设计简洁,方便随时访问。 2. 2.1. 导入表格 用户通过“导入”按钮或拖拽区域选择或批量导入Excel文件(.xls/.xlsx),最多支持同时打开30个及以上文件。 导入后自动识别表格内容格式(数字、日期、文本),并生成分析报告。 支持文件列表展示,显示文件名、大小、导入时间及格式识别结果。 2.2. 分析表格内容及格式 自动分析导入的表格内容和格式,结果以图表和统计数据形式可视化展示。 支持自动修正格式错误(如错误的日期格式、数字格式不统一等),用户可选择应用或忽略。 分析结果支持导出报告。 2.3. 修改表格内容及格式 分析完成后自动进入编辑界面,展示表格内容。 支持直接编辑单元格内容,支持批量修改(如根据命令条件批量替换或归类)。 支持撤销和重做操作。 支持多标签页同时编辑多个表格,便于快速切换。 2.4. 合并表格 用户可选择结构相同的多个表格文件进行合并。 合并规则为简单拼接行,合并后整行用不同颜色标记,颜色方案支持用户自定义。 支持预览合并结果,确认后保存为新文件。 支持取消合并操作。 2.5. 导出表格及重命名 支持选择导出格式(如xlsx、csv等)。 支持批量重命名,支持自定义规则(如添加时间戳、序号等)。 导出后文件保存为新文件,避免覆盖原文件。 2.6. 命令设置(常驻功能) 命令条件专注于多国语言同义词归类和同属性词归列。 支持导入词库文件,方便批量管理同义词和属性词。 提供命令条件的预览和测试功能,方便用户验证规则效果。 命令条件应用于导入、分析、编辑和合并流程,实现智能内容处理。 2.7. 操作历史(常驻功能) 自动记录用户所有操作(导入、编辑、合并、导出等)。 支持按时间和操作类型筛选历史记录。 支持恢复到任意历史状态。 支持导出操作历史日志,便于审计和备份。 3. 软件启动后进入“导入表格”页面,用户通过顶部步骤导航条依次完成导入、分析、编辑、合并、导出五个步骤。 步骤导航条支持用户随时返回任一步骤修改内容。 “命令设置”和“操作历史”作为常驻功能模块,界面侧边或底部常显,用户可随时访问和操作,且命令条件影响所有流程步骤。 各步骤页面之间通过步骤导航条和界面内按钮顺畅切换,确保流程闭环。 软件为单窗口多页面设计,支持多标签页编辑多个表格,支持快捷键操作提升效率。
最新发布
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值