jQuery—tab栏切换
<div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价(50000)</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价(50000)模块内容</div><div class="item">手机社区模块内容</div></div></div>
<style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
<script>// 点击修改内容以及样式// 点击li添加类名current,其他li不准加这个类名// 并且对应的div要显示,其他的div要隐藏$('.tab_list li').click(function () {// 1、点击哪个li给哪个li添加类名,其他的移除类名$(this).addClass('current').siblings().removeClass('current');// 2、显示对应的div,其他div隐藏// 获取索引值var index = $(this).index();// 根据index查找对应div$('.tab_con div').eq(index).show().siblings().hide();});</script>
注意jQuery等案例,需要引入jquery编辑文件
<script src="jquery.min.js"></script>
实现效果:
jQuery—tab栏切换相关推荐
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
- Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
- WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例 代码 <!DOCTYPE html> <html lang="en"><head> ...
- apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
- 原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 微信小程序点击tab栏切换,点击切换某个tab滚动到中间( uniapp )
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
- vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能 下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
- 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)
1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
最新文章
- PingCode Wiki ——国内最顶级的产研团队知识库产品介绍
- OC中简单的界面设置
- IndexError: too many indices for array
- ELKStack入门篇(三)之logstash收集日志写入redis
- php mysql三_PHP和MySQL基础教程(三)
- 企业网站之html,httpd概述
- C#可空类型(Nullable Types)
- AS工程下gradle各文件(gradle.propertie等)与gradle配置(缓存等)讲述
- 方差,平方差,标准差的区别是什么?
- 【ElasticSearch】Es 源码之 NodeService 源码解读
- 如何用相机拍出天空漂亮的云朵
- c语言城市交通灯优化,城市智能交通灯系统(本科)毕业论文.doc
- 医学图像预处理之CT成像原理
- 英语二作文模板及范文
- MATLAB将数据写入obj文件
- 《手把手教你移植InfoNES(到HANKER-LM4F232)》
- 用户要进行远程登录 必须在自己的计算机上,大学计算机基础上机考试题库3
- 深度学习框架之Keras入门教程
- 匿名虚拟服务器,如何使 SMTP 虚拟服务器能够接受匿名发送的邮件扩展属性
- 表白神器-摩斯密码1121311233321113212313323332113
热门文章
- 分类决策树 回归决策树_决策树分类器背后的数学
- C语言高级编程:C语言数据类型大小和取值范围
- 《城邦暴力团》:一部奇书、反书、隐书
- Waveform Audio 驱动(Wavedev2)之:WAV API模拟
- Ubuntu15.04如何添加163源
- 如何修改浏览器服务器时间格式,浏览器模式怎么改模式
- 自然哲学的数学原理_物理起源点,牛顿《自然哲学的数学原理》
- python多线程写日志_python 应用logging多线程写多个log文件
- 深入到系统组件是否白盒测试_2019年系统集成项目管理工程师:第一章 信息化知识(三)要点?...
- keras如何保存模型