jQuery实现商品详情 详细参数页面切换
利用index实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{display:none;}
.item{
height: 38px;
width: 800px;
border: 1px solid #dddddd;
margin: 0 auto;
}
.item .item-content{
float: left;
line-height: 38px;
padding: 0 15px;
border-right: 1px solid #dddddd;
cursor: pointer;
}
.item .active{
background-color: #eeeeee;
color: red;
font-weight: bold;
}
.content{
height: 500px;
width: 800px;
border: 1px solid #dddddd;
margin: 0 auto;
}
.content .content-content{}
</style>
</head>
<body>
<div class="item">
<div class="item-content active">商品介绍</div>
<div class="item-content">详细参数</div>
<div class="item-content">客户评价</div>
</div>
<div class="content">
<div class="content-content">内容1</div>
<div class="content-content hide">内容2</div>
<div class="content-content hide">内容3</div>
</div> <script src="jquery-3.3.1.js"></script>
<script>
// 利用索引实现，代码简洁，但依赖全局唯一的样式item-content content-content，所以注意这二种新式只在这儿使用，且item-content和content-content的内容顺序要对应。
$('.item-content').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.content-content').eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
利用自定义属性实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{display:none;}
.item{
height: 38px;
width: 800px;
border: 1px solid #dddddd;
margin: 0 auto;
}
.item .item-content{
float: left;
line-height: 38px;
padding: 0 15px;
border-right: 1px solid #dddddd;
cursor: pointer;
}
.item .active{
background-color: #eeeeee;
color: red;
font-weight: bold;
}
.content{
height: 500px;
width: 800px;
border: 1px solid #dddddd;
margin: 0 auto;
}
.content .content-content{}
</style>
</head>
<body>
<div class="item">
<div itemId="1" class="item-content active">商品介绍</div>
<div itemId="2" class="item-content">详细参数</div>
<div itemId="3" class="item-content">客户评价</div>
</div>
<div class="content">
<div contentId="1" class="content-content">内容1</div>
<div contentId="3" class="content-content hide">内容3</div>
<div contentId="2" class="content-content hide">内容2</div>
</div> <script src="jquery-3.3.1.js"></script>
<script>
// 利用自定义属性itemId contentId相对应，这样不依赖于顺序，children会用到字符串拼接
$('.item').children().click(function () {
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).attr('itemId');
$('.content').children("[contentId="+index+"]").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
jQuery实现商品详情 详细参数页面切换的更多相关文章
- 当前jQuery Mobile支持的6种页面切换方式
切换方式 data-transition属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 fli ...
- 22 Flutter仿京东商城项目 inappbrowser 加载商品详情、保持页面状态、以及实现属性筛选业务逻辑
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...
- Android点击跳转到淘宝的某一商品详情页或者某一店铺页面
最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...
- JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存
1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...
- jquery Mobile入门—多页面切换示例学习
1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...
- Flutter实战视频-移动电商-48.详细页_详情和评论的切换
48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...
- App 仿淘宝：控制详情和购买须知样式切换，控制商品详情和购买须知选项卡的位置（固定在顶部还是正常）
CSS: <div id="details" ref="details" class="details" :class="t ...
- 第04项目：淘淘商城(SpringMVC+Spring+Mybatis)【第九天】(商品详情页面实现)
https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...
- jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
随机推荐
- 2016 多校联赛7 Elegant Construction
Being an ACMer requires knowledge in many fields, because problems in this contest may use physics, ...
- ss server端配置
关于ss server的配置,可以参考一个网址 关于服务器的购买可以上VIRMACH购买 和本地安装ss类似,首先安装ss,pip install shadowsocks 配置服务器参数,vim /e ...
- javascript文档DOC
python.java都有官网,有官方文档 javascript却找不到官网和官方文档 js大全 https://github.com/jobbole/awesome-javascript-cn md ...
- 数据类型int、float、str、list、dict、set定义及常用方法汇总
数据类型int:记录整数事物状态 可变不可变:值不可变类型,改变变量值实则是改变了变量的指向 int():功能:1.工厂函数, i = 5 <==> i = int(5) 2.强制类型转换 ...
- Contest1036 - 2017西安电子科技大学程序设计新生赛网络预选赛
一名大三older 希望能帮助大一萌新...加油 xiandianer!!!!; xdoj 1260 (B) 水题 用了一下STL (好长啊...) #include<iostream> ...
- lesson5rnns-fastai
32min 如何确定embedding个数即嵌入矩阵容量?:不确定:与文本的字数关系不大,关键是语言的复杂度和需要解决的问题类型 embedding的效果要比one hot编码的效果好
- URL编码表（收集到的，为了方便查看）
URL编码表
- shell 修改工作路径
import os os.getcwd() #查看现路径 os.chdir('新路径') #修改路径
- gunicorn工作原理
gunicorn工作原理 Gunicorn“绿色独角兽”是一个被广泛使用的高性能的Python WSGI UNIX HTTP服务器,移植自Ruby的独角兽(Unicorn )项目,使用pre-fork ...
- MySQL之高可用MHA部署
先说一下大概原理 虚拟机A ip为10.0.3.92 作为master 虚拟机B ip为10.0.3.102 作为slave1 虚拟机C ip为10.0.3.103 作为 ...