<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>
<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>
<script>
$(function () {
// 1.点击上部的li,当前li 添加current类,其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程操作
$(this).addClass("current").siblings().removeClass("current");
// 2.点击的同时,得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 3.让下部里面相应索引号的item显示,其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>

注意show和hide的使用

5.jQuery之栏切换的更多相关文章

  1. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  2. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  3. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  4. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  5. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  7. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  8. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  9. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

随机推荐

  1. 二级索引-phoenix-单机部署

    下载 从下载地址下下载以下对应hbase版本的版本: phoenix-4.7.0-HBase-1.0/bin/phoenix-4.7.0-HBase-1.0-bin.tar.gz 安装部署 解压 ta ...

  2. Spring boot之MyBatis

    文章目录1. 环境依赖2. 数据源2.1. 方案一 使用 Spring Boot 默认配置2.2. 方案二 手动创建3. 脚本初始化4. MyBatis整合4.1. 方案一 通过注解的方式4.1.1. ...

  3. 3分割线左右间距(LinearLayoutManager.VERTICAL)

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  4. python3笔记十二:python数据类型-Dictionary字典

    一:学习内容 字典概念 字典创建 字典访问 字典添加 字典删除 字典遍历 字典与列表比较 二:字典概念 1.使用键值对(key-value)存储,具有极快的查找速度 2.注意:字典是无序的 3.特性: ...

  5. extentsreport testng美化报告生成

    一:主要内容 优化testng测试报告,使用extentsreport 解决extentsreport打开后加载不出来样式的问题 二:报告效果 先上图,看下testng extentsreport报告 ...

  6. Shell中的条件测试和循环语句

    1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...

  7. pom文件中的dependencyManagement和dependencies的区别

    dependencies 子项目中,自动继承父项目中的相关依赖 dependencyManagement 只是声明依赖,并不实现引入,因此子项目中需要显示的声明需要用的依赖.如果不在子项目中声明依赖, ...

  8. sql总结-----基本查询

    创建一个测试表,插入一些测试数据: Create Table Cstable (Id Int,Age Int,Name Varchar2(8),Address Varchar2(20)); Inser ...

  9. TODO: Java虚拟机 初始化过程

    Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...

  10. Raspbian 编译安装 PHP 7.2

    原文地址:Raspbian 编译安装 PHP 7.2 0x00 配置 开发板: Raspberry Pi 3B 系统: Raspbian 2019-04-08 stretch 0x01 下载源码 20 ...