利用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. Vue 之 element-ui upload组件的文件类型

    在使用element-ui的upload上传组件的时候,有时候会遇到 控制上传文件类型 的需求,只需要配置accept属性为允许的类型即可,比如: <el-upload class=" ...

  2. tableView 分割线的处理

    有时候根据UI设计图的需要我们需要对原生的TableView分割线做靠左,靠右的操作 在下面这个方法中实现即可. - (void)tableView:(UITableView *)tableView ...

  3. JAVA基础部分复习(五、JAVA反射)

    关于反射: 1.需要了解jvm类的加载机制(java高级部分会详细介绍) 2.反射的API其实只要多看看API和源码,很容易就懂了. 下面是代码,简单讲解反射的使用: import java.lang ...

  4. Gym - 101889D：Daunting device （老司机树）

    题意:N个格子排出一排,开始格子颜色都是1:现在有M个操作: 或,把区间[L,R]颜色改为c: 或,查询一共有多少格子颜色为c. 最后求颜色最多的数量. 数据是随机的,且强制在线. 思路:ODT裸题. ...

  5. 两个Inline-block元素不对齐

    可能是有一个元素用了overflow:hidden,(给另一个元素也加上) 也有可能是基线没对齐,用vertical-align:top可以

  6. FZU软工第十一次作业-软件产品案例分析

    目录 前言: 第一部分.调研,评测: 1.1.初次感觉: 1.2.企业号bug: 1.3.你觉得为什么这个产品组的人没有发现这些bug: 1.4.假设你们团队需要开发这套系统,需要注意哪些方面: 2. ...

  7. libsvm使用总结

    ./tools/ subset.py  分割数据集 grid.py   优化参数c.g checkdata.py   检测数据集格式 easy.py   综合 ./windows/ svm-scale ...

  8. 《DSP using MATLAB》Problem 5.24-5.25-5.26

    代码: function y = circonvt(x1,x2,N) %% N-point Circular convolution between x1 and x2: (time domain) ...

  9. vernemq 集群 docker-compose 搭建简单试用

    vernemq 是一款开源的mqtt broker, 支持cluster 模式部署,而且部署比较简单 以下是一个使用docker-compose 搭建环境的demo 环境准备 docker-compo ...

  10. Tensorflow 笔记

    TensorFlow笔记-08-过拟合,正则化,matplotlib 区分红蓝点 TensorFlow笔记-07-神经网络优化-学习率,滑动平均 TensorFlow笔记-06-神经网络优化-损失函数 ...