利用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. 使用Redis构建支持程序

    在Linux和Unix世界中,有两种常见的记录日志的方法.第一种是将日志记录到文件里面,然后随着时间流逝不断地将一个有一个日志行添加到文件里面,并在一段时间之后创建新的日志文件.包括Redis在内的很 ...

  2. JS之鼠标改变img

    代码用途: 通过点击图片,来改变图片内容 代码: <!DOCTYPE html> <html> <body> <script> function cha ...

  3. ecmall 基础类分析

    class ECBaseApp,继承自class BaseApp,是includes/ecapp.base.php文件. 该类是一个非常重要的类,他是各个APP的应用的基础继承类.处理相关的基础应用. ...

  4. 笔记：Oracle查询重复数据并删除，只保留一条记录

    1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 where Id in (select Id from 表 group byId having cou ...

  5. 第二十六课 典型问题分析（Bugfix）

    问题1: glibc中的strdup实现如下: 没有对参数s进行空指针判断. 我们的Exception.cpp中应做改进: 在第12行进行判断空指针操作. 问题2: t1在析构时会抛出异常,我们在re ...

  6. jupyter环境安装

    jupyter notebook环境安装 一.什么是Jupyter Notebook? 1. 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文 ...

  7. const 和let的本质区别

    在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量. const优于let有几个原因.一个是const可以提醒阅读程序的人,这个变量不应该改变:另一个是c ...

  8. java-类与类，类与接口，接口与接口的关系

    1.类与类: - 继承关系,只能单继承,可以多层继承. 2.类与接口: - 实现关系,可以单实现,也可以多实现. - 并且还可以在继承一个类的同时实现多个接口. - * 例:class Demo ex ...

  9. Win-Lin双系统重装Windows找回Linux启动

    第一系统Windows,第二系统Linux:Ubuntu18.10: 1. 重新安装Windows系统后,使用Ubuntu的安装光盘,或启动U盘启动电脑:2. 选择:Try Ubuntu ;3. 进入 ...

  10. c#接口与虚函数的实验报告

    1)定义Student类,用string型变量name存储学生姓名,用int型变量age存储学生年龄.Student类实现IComparable接口.要求从键盘输入学生的姓名和年龄,并注意可能出现的异 ...