利用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实现商品详情 详细参数页面切换的更多相关文章

  1. 当前jQuery Mobile支持的6种页面切换方式

    切换方式 data-transition属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 fli ...

  2. 22 Flutter仿京东商城项目 inappbrowser 加载商品详情、保持页面状态、以及实现属性筛选业务逻辑

    加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...

  3. Android点击跳转到淘宝的某一商品详情页或者某一店铺页面

    最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...

  4. JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...

  5. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  6. Flutter实战视频-移动电商-48.详细页_详情和评论的切换

    48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...

  7. App 仿淘宝：控制详情和购买须知样式切换，控制商品详情和购买须知选项卡的位置（固定在顶部还是正常）

    CSS: <div id="details" ref="details" class="details" :class="t ...

  8. 第04项目：淘淘商城(SpringMVC+Spring+Mybatis)【第九天】(商品详情页面实现)

    https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...

  9. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

随机推荐

  1. Java中的13个原子操作类

    java.util.concurrent.atomic包一共提供了13个类.属于4种类型的原子更新方式,分别是原子更新基本类型,原子更新数组,原子更新引用和原子更新属性.Atomic包里的类基本都是使 ...

  2. 解决vi编辑器不能使用方向键和退格键

    1.使用vi命令时,不能正常编辑文件,使用方向键时老是出现很多字母 这个问题主要是新系统直装了vi,没有装vim.因为vi是不能直接按退格键删除字符的,所以当你使用退格键删除字符,只有在按下esc时, ...

  3. Eclipse 通过JPA自动生成注解实体

    hibernate是JPA最常用的实现之一,而且hiberante自身也对注释语法进行了支持.现在再不用去看那一堆堆的XML映射了.而且eclipse还提供了从数据库直接生成Entity Class的 ...

  4. Spring Batch框架流程的简单介绍

    Spring Batch流程介绍: 上图描绘了Spring Batch的执行过程.说明如下: 每个Batch都会包含一个Job.Job就像一个容器,这个容器里装了若干Step,Batch中实际干活的也 ...

  5. dubbo 框架文档地址

    http://dubbo.apache.org/books/dubbo-dev-book/ http://dubbo.apache.org/books/dubbo-admin-book/ http:/ ...

  6. 索引rebuild与rebuild online区别

    索引rebuild与rebuild online区别 1.0目的,本篇文档探讨索引rebuild 与 rebuild online的区别 2.0猜测:已有的知识 2.1对索引rebuild重建会对表申 ...

  7. urllib.request中Handler处理器

    1.定义 自定义的urlopen()方法,urlopen()方法是一个特殊的opener(模块已定义好),不支持代理等功能,通过Handler处理器对象来自定义opener对象 2.常用方法 1.bu ...

  8. Gym102040 .Asia Dhaka Regional Contest(寒假自训第9场)

    B .Counting Inversion 题意:给定L,R,求这个区间的逆序对数之和.(L,R<1e15) 思路:一看这个范围就知道是数位DP. 只是维护的东西稍微多一点,需要记录后面的各种数 ...

  9. 用户密码管理和 su 命令

    1.passwd root 用户给自己改 密码,直接 输入 passwd  就可以了 若是给其它用户修改密码,就需要 passwd  user_name 用户锁定和解锁 passwd -l user_ ...

  10. ubuntu软件管理

    https://www.cnblogs.com/forward/archive/2012/01/10/2318483.html 一.Ubuntu中软件安装方法1.APT方式(联网安装, 需要联网下载软 ...