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


Posted in Javascript onOctober 11, 2018

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

这是html代码

<p id="main">
  <!--标题-->
  <ul id="tab">
   <li class="showed">tab1</li>
   <li>tab2</li>
   <li>tab3</li>
  </ul>
  <!--内容-->
  <p id="contents">
   <ul style="display:block;"><!--默认显示第一个-->
    <span>模块一</span>
   </ul>
   <ul>
    <span>模块二</span>
   </ul>
   <ul>
    <span>模块三</span>
   </ul>
  </p>
 </p>

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内容
  })
 }
});

效果图:

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

Javascript 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
使用js实现数据格式化
Dec 03 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
Javascript缓存API
Jun 14 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
微信小程序实现刷脸登录
May 25 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 #Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 #Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 #Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
vue环形进度条组件实例应用
Oct 10 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
PDO实现学生管理系统
2020/03/21 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
浅谈node的事件机制
2017/10/09 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
使用JS实现动态时钟
2020/03/12 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python里 super类的工作原理详解
2019/06/19 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
大专毕业生自我评价分享
2013/11/10 职场文书
总经理岗位职责范本
2014/02/02 职场文书
个人综合鉴定材料
2014/05/23 职场文书
采购部长岗位职责
2014/06/13 职场文书
金融保险专业求职信
2014/09/03 职场文书
医德医风自我评价
2014/09/19 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
幼儿教师个人总结
2015/02/05 职场文书
稽核岗位职责
2015/02/10 职场文书
你会写请假条吗?
2019/06/26 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
Java中的Kotlin 内部类原理
2022/06/16 Java/Android