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 相关文章推荐
取得传值的函数
Oct 27 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
详解JS函数防抖
Jun 05 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js验证表单第二部分
2006/11/25 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python看某个模块的版本方法
2018/10/16 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python实现数字炸弹游戏程序
2020/07/17 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
数控专业应届生求职信
2013/11/27 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏