热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css配合JavaScript实现tab标签切换效果

本篇文章我们给大家分享一个关于CSS配合JS实现的TAB标签切换效果,需要的朋友们可以测试下。

本文给大家介绍如何用CSS实现二维码扫描的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

这是html代码

  • tab1
  • tab2
  • tab3

    模块一
    模块二
    模块三

CSS样式

li{
 list-style:none;
}
 #main {
  width: 600px;
  margin: 200px auto;
 }
 
 #tab {
  overflow: hidden;
  background: #000;
  border: 1px solid #000;
 }
 
 #tab li {
  float: left;
  color: #fff;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  padding: 0 20px;
 }
 
 #tab li.showed {
  color: #000;
  background: #ddd;
 }
 
 #contents {
  border: 1px solid #000;
  border-top-width: 0;
 }
 
 #contents ul {
  line-height: 150px;
  display:none;
  margin: 0 30px;
  padding: 10px 0;
 }

下面是JS了

$(function() {
 window.Onload= function() {
  var lis = $('#tab li');
  var uls = $('#contents ul');
 
  lis.click(function() {
   var li_selected = $(this); //选中的li分类
   var num = li_selected.index(); //相对于同胞元素的位置
   lis.removeClass(); //清空liCSS属性
   li_selected.addClass('showed'); //选中li添加属性
   uls.css('display', 'none'); //隐藏所有ul标签
   uls.eq(num).css('display', 'block'); //展示选中的li所对应的ul内容
  })
 }
});

效果图:


推荐阅读
  • Vuex 实战进阶:构建高效笔记本应用(第二篇)
    在上一篇文章中,我们初步探讨了 Vuex 在该项目中的应用。本文将深入解析整个项目的架构设计。首先回顾 `main.js` 的内容,然后重点分析 `App.vue` 文件,其中引入了 `Toolbar.vue` 和 `NodeList.vue` 组件,详细说明它们在应用中的作用和交互方式。通过这些组件的协同工作,我们将展示如何构建一个高效且响应迅速的笔记本应用。 ... [详细]
  • 如何运用蒙特卡洛方法计算NPV:计算机专业毕业设计遇到难题怎么办?
    许多计算机科学专业的学生在大学期间都会遇到这样的困扰:课堂上教授的内容往往偏向理论,实际应用的知识点讲解得较为浅显和概括,导致在进行毕业设计时,如运用蒙特卡洛方法计算净现值(NPV)等复杂问题时感到无从下手。本文旨在探讨如何通过深入理解和实践蒙特卡洛模拟技术,解决这类计算难题,为学生的毕业设计提供实用指导。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 新年伊始,正是学习的最佳时机。本文全面解析了CK1957-Zookeeper的核心概念与实践技巧,旨在帮助初学者快速掌握这一深度学习工具。通过详细的理论讲解和实际操作示例,读者可以更好地理解Zookeeper的工作原理及其在分布式系统中的应用。无论是新手还是有一定基础的学习者,都能从中受益匪浅。 ... [详细]
  • 探究Oracle数据库字符集编码的详细方法与实践
    本文深入探讨了Oracle数据库字符集编码的详细方法与实践。首先,通过执行 `SELECT USERENV('language') FROM DUAL;` 查询服务端字符集编码。其次,通过在注册表中搜索 `NLS_LANG` 参数来查看客户端字符集编码。此外,文章还介绍了如何在不同场景下正确配置和转换字符集,以确保数据的一致性和完整性。 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • Python学习:环境配置与安装指南
    Python作为一种跨平台的编程语言,适用于Windows、Linux和macOS等多种操作系统。为了确保本地已成功安装Python,用户可以通过终端或命令行界面输入`python`或`python3`命令进行验证。此外,建议使用虚拟环境管理工具如`venv`或`conda`,以便更好地隔离不同项目依赖,提高开发效率。 ... [详细]
  • 本文介绍了在PHP环境中优化表格列表和表单Label样式的技巧,通过CSS代码提升表单的视觉效果。具体包括为每个标签添加箭头背景,并在标签获得焦点时实现背景高亮的效果。示例代码展示了如何为“姓名”和“邮件”字段应用这些样式,适用于phpStudy开发环境。 ... [详细]
  • 斐波那契数在组合数学中的应用与探索
    斐波那契数列作为数学领域中一个广为人知的数列,不仅拥有丰富的数学性质,还与自然界的诸多现象紧密相连。本文将深入探讨这一数列背后的奥秘,揭示其在组合数学中的广泛应用,并通过具体问题的引入,展示斐波那契数列在解决复杂组合问题时的独特优势。 ... [详细]
  • 如何使用CSS精准控制中文字符间距
    本文详细探讨了如何利用CSS精确控制中文字符间距,提供了多种实用技巧和示例代码,具有较高的参考价值。通过本文的学习,读者将能够更好地掌握CSS在中文排版中的应用,提升网页设计的美观度和可读性。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • DHCP三层交换机设置方式全局模式和接口模式设置方式和命令resetsave回车输入yreboot输入n输入y重启后就恢复默认设置了默认用户名密码adminAdmin@huawei ... [详细]
  • 在椭圆形状设计中,色彩搭配方案对视觉效果和用户体验至关重要。本文分析了不同色彩组合在椭圆形状设计中的应用效果,特别探讨了白色背景与绿色文字的搭配,指出长期观看这种配色可能会导致视觉疲劳。通过引入多种色彩搭配方案,本文旨在为设计师提供更加科学和舒适的色彩选择建议。 ... [详细]
  • POJ 1696: 空间蚂蚁算法优化与分析
    针对 POJ 1696 的空间蚂蚁算法进行了深入的优化与分析。本研究通过改进算法的时间复杂度和空间复杂度,显著提升了算法的效率。实验结果表明,优化后的算法在处理大规模数据时表现优异,能够有效减少计算时间和内存消耗。此外,我们还对算法的收敛性和稳定性进行了详细探讨,为实际应用提供了可靠的理论支持。 ... [详细]
author-avatar
手机用户2502922713
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有