5.jQuery之栏切换
<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之栏切换的更多相关文章
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
随机推荐
- 二级索引-phoenix-单机部署
下载 从下载地址下下载以下对应hbase版本的版本: phoenix-4.7.0-HBase-1.0/bin/phoenix-4.7.0-HBase-1.0-bin.tar.gz 安装部署 解压 ta ...
- Spring boot之MyBatis
文章目录1. 环境依赖2. 数据源2.1. 方案一 使用 Spring Boot 默认配置2.2. 方案二 手动创建3. 脚本初始化4. MyBatis整合4.1. 方案一 通过注解的方式4.1.1. ...
- 3分割线左右间距(LinearLayoutManager.VERTICAL)
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- python3笔记十二:python数据类型-Dictionary字典
一:学习内容 字典概念 字典创建 字典访问 字典添加 字典删除 字典遍历 字典与列表比较 二:字典概念 1.使用键值对(key-value)存储,具有极快的查找速度 2.注意:字典是无序的 3.特性: ...
- extentsreport testng美化报告生成
一:主要内容 优化testng测试报告,使用extentsreport 解决extentsreport打开后加载不出来样式的问题 二:报告效果 先上图,看下testng extentsreport报告 ...
- Shell中的条件测试和循环语句
1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...
- pom文件中的dependencyManagement和dependencies的区别
dependencies 子项目中,自动继承父项目中的相关依赖 dependencyManagement 只是声明依赖,并不实现引入,因此子项目中需要显示的声明需要用的依赖.如果不在子项目中声明依赖, ...
- sql总结-----基本查询
创建一个测试表,插入一些测试数据: Create Table Cstable (Id Int,Age Int,Name Varchar2(8),Address Varchar2(20)); Inser ...
- TODO: Java虚拟机 初始化过程
Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...
- Raspbian 编译安装 PHP 7.2
原文地址:Raspbian 编译安装 PHP 7.2 0x00 配置 开发板: Raspberry Pi 3B 系统: Raspbian 2019-04-08 stretch 0x01 下载源码 20 ...