利用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. nginx 之 proxy_pass详解

    在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径:如果没有/,表示相对路径,把匹配的路径部分也给代理走.     假设下面四种情况分别用 h ...

  2. MySQL 显示表字段及注释等信息

    SHOW TABLES  from resource [FROM db_name] //列出数据库数据表 SHOW TABLE STATUS from resource [FROM db_name]  ...

  3. PHP安全之webshell和后门检测（转）

    基于PHP的应用面临着各种各样的攻击: XSS:对PHP的Web应用而言,跨站脚本是一个易受攻击的点.攻击者可以利用它盗取用户信息.你可以配置Apache,或是写更安全的PHP代码(验证所有用户输入) ...

  4. ace编辑器 光标错位

    字体的关系

  5. 后台管理Models

    1.后台的配置 登录地址 :http://localhost:8000/admin 创建后台管理员(超级用户): 在终端输入:./manage.py createsuperuser Username ...

  6. next_permutation(start,end)

    一道水题,简单的next_permutation用法,相同的还有prev_permutation 包含在头文件<algorithm>中 字符串 acab 含有两个a ,一个b ,一个c , ...

  7. c++——基本概念

    如何理解c/c++中的指针?每种编程语言都使用指针,但Java.c#等将指针隐藏,而c/c++将指针暴露给了用户(程序员)https://www.cnblogs.com/gxcdream/p/4805 ...

  8. （0）diango、ORM的语法

    Django PS:Django默认的是sqlite3数据库 PS:settings里面的这里可以修改数据库 1.^ 这个符号就是以什么开头   #url(r'index/',views.index) ...

  9. 【递推】【HDOJ】

    http://acm.hdu.edu.cn/showproblem.php?pid=2501 Tiling_easy version Time Limit: 1000/1000 MS (Java/Ot ...

  10. 简单说明 Virtual DOM 为啥快

    Virtual DOM 就是用 JS 的对象来描述 DOM 结构的一个 DOM 树.如: var element = { tagName: 'ul', // 节点标签名 props: { // DOM ...