利用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. input默认显示当前时间

    方法一: // 获取当天的年月日 new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().get ...

  2. 计数SQL，查找单据总量和按季度查找单据总量

    --查找单据总量 select COUNT(1) as '表XXXXXX数据量' from XXXXXXwith(nolock) --按季度查找单据总量 select count(1) as '表XX ...

  3. Quartz 原理

    Quartz API :http://www.quartz-scheduler.org/api/2.2.0/ http://www.boyunjian.com/javadoc/org.apache.s ...

  4. 河南省第四届ACM省赛(T3) 表达式求值

    表达式求值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min ...

  5. linux 将一个文件分解成多个不同名文件

    1.通过c直接实现 #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include & ...

  6. [转][译] Closures in Lua - Lua中的闭包

    http://www.cnblogs.com/plodsoft/p/5900270.html?utm_source=tuicool&utm_medium=referral 原文:(PDF) . ...

  7. 百度api--之导航

    其实挺简单的,只要知道出发点和终点的经纬度就可以了; 百度webURLAPI : http://lbsyun.baidu.com/index.php?title=uri/api/web 这个是百度的a ...

  8. Gym.101955: Asia Shenyang Regional Contest(寒假自训第10场)

    C.Insertion Sort 题意:Q次询问,每次给出N,M,Mod,问你有多少种排列,满足前面M个数字排序之后整个序列的LIS>=N-1. 思路:我们把数字看成[1,M],[N-M+1,N ...

  9. 改变radio单选按钮的样式

    <div class="choose_btn"> <input type="radio" name="choose_raido&qu ...

  10. 20155208徐子涵Vim编辑器学习经验

    20155208徐子涵 2016-2017-2 Vim编辑器学习经验 当我们运用虚拟机进行书写代码时,我们就会用到Vim编辑器,用Vim编辑器进行编辑特别方便,而Vim编辑器中也有一些操作需要去学习. ...