博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery实现商品详情 详细参数页面切换

Posted on 2018-08-26 19:23  alex_hrg  阅读(1287)  评论(0)    收藏  举报

　　

利用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>