仿淘宝商品属性代码（刚出炉）

最新推荐文章于 2022-12-08 00:01:48 发布
最新推荐文章于 2022-12-08 00:01:48 发布
阅读量216 收藏
点赞数
文章标签： jQuery Ajax JavaScript QQ HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houchengli_21/article/details/83736113
版权

欢迎和大家交流 ：）

QQ:59532543

 

 

or plugin

 

(function($){
           
                $.fn.duoxuan = function(){
                    this.click(function(){
                        if ($(this).hasClass("selected")) {
                            $(this).removeClass("selected");
                            $(this).find('i').remove();
                        }
                        else {
                            $(this).addClass("selected").append("<i>selected</i>");
                        }
                    })
                };
               
                $.fn.danxuan = function(){
                    this.click(function(){
                        $(this).addClass("selected").append("<i>selected</i>").siblings().removeClass("selected").find('i').remove();
                    })
                }
            })(jQuery);

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <style>
            body {
                font-family: Arial;
                font-size: 12px;
            }
            * {
                padding: 0;
                margin: 0
            }
           
            .segment {
                border: 1px solid #ccc;
                padding: 8px;
                display: inline-block;
            }
           
            .segment dl {
                padding-bottom: 6px;
                clear: both;
                float: left;
            }
           
            .segment dl dt {
                margin-top: 4px;
                text-align: left;
                float: left;
                width: 40px;
            }
           
            .segment dl dd {
                float: left;
            }
           
            ul {
                list-style: none;
                color: #666666;
            }
           
            ul li {
                background-color: #FFFFFF;
                float: left;
                line-height: 20px;
                margin: 0 4px 4px 0;
                padding: 1px;
                position: relative;
                vertical-align: middle;
                list-style: none;
            }
           
            ul li a {
                background-color: #FFFFFF;
                border: 1px solid #C8C9CD;
                color: #000000;
                display: block;
                min-width: 10px;
                padding: 0 6px;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
                width: auto !important;
            }
           
            .selected a, a:hover {
                border: 2px solid #C30008;
                margin: -1px;
            }
           
            .selected i {
                background: url("http://img04.taobaocdn.com/tps/i4/T1vqNKXk8FXXXXXXXX.png") no-repeat scroll 0 0 transparent;
                background-position: -150px -296px;
                /*background-position: 0 -101px;*/
                bottom: 0;
                display: block;
                height: 12px;
                overflow: hidden;
                position: absolute;
                right: 0;
                text-indent: -9999em;
                width: 12px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $("#biketype ul li").click(function(){
                    //$(this).toggleClass("selected");
                    //alert($(this).attr("datavalue"));
                    if ($(this).hasClass("selected")) {
                        $(this).removeClass("selected");
                        $(this).find('i').remove();
                    }
                    else {
                        $(this).addClass("selected").append("<i>selected</i>");
                    }
                });
                $("#sex ul li").click(function(){
                    $(this).addClass("selected").append("<i>selected</i>").siblings().removeClass("selected").find('i').remove();
                });
            })
        </script>
    </head>
    <body>
        <div class="segment">
            <dl>
                <dt>
                    <strong>I Ride</strong>
                </dt>
                <dd id="biketype">
                    <ul>
                        <li datavalue="Road">
                            <a href="#"><span>Road</span></a>
                        </li>
                        <li datavalue="MTB">
                            <a href="#"><span>MTB</span></a>
                        </li>
                        <li datavalue="City/Commuting">
                            <a href="#"><span>City/Commuting</span></a>
                        </li>
                        <li datavalue="Fixie/SS">
                            <a href="#"><span>Fixie/SS</span></a>
                        </li>
                        <li datavalue="Triathlon">
                            <a href="#"><span>Triathlon</span></a>
                        </li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>
                    <strong>I am</strong>
                </dt>
                <dd id="sex">
                    <ul>
                        <li>
                            <a href="#"><span>Male</span></a>
                        </li>
                        <li>
                            <a href="#"><span>Female</span></a>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
    </body>
</html>

 

houchengli_21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS实现淘宝首页
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
仿淘宝中心轮播图 JS[代码+详细讲解+效果图]
心态的博客
05-05 4229
仿淘宝中心轮播图 JS[代码+详细讲解+效果图] 重点案例，掌握BOM知识点的最佳案例。
安卓APP源码和设计报告——仿淘宝购物APP
最新发布
科大云炬
12-08 3270
2021—2022学年第二学期期末考试《Android手机软件开发》实践考核项目设计说明书项目名称： 购物APP的设计与实现专 业： 计算机科学与技术学 号：姓 名：任课教师：2022年6月12日目 录1.项目概述112.项目需求分析113.开发环境224.界面设计224.1登录224.2主页面224.3商品详情页面334.4商品页面444.5购物车页面554.6个人界面665.数据存储776.项目开发与实现886.1登录886.2主页面886.3商品详情页面886.4商品页面886.5购物车页面996.6
jquery仿淘宝SKU选择商品属性代码
06-02
jquery实现的类似淘宝sku选择，宝贝库存、颜色等属性源码，亲测可用！
仿淘宝商品属性分类
12-12
想要看界面的 http://blog.csdn.net/u010924834/article/details/50353955这是界面效果 我制作的下边的分类效果
javascript 连连看代码出炉
10-29
JavaScript 连连看游戏实现代码详解 在本资源中，我们将详细介绍 JavaScript 实现的连连看游戏代码。该代码提供了一个完整的游戏实现，包括游戏设置、游戏逻辑和用户交互等方面。 游戏设置 在游戏设置方面，该...
2016中国淘宝村及淘宝镇名单出炉.pdf
06-21
2016中国淘宝村及淘宝镇名单出炉
仿微信6.2UI界面最新出炉
09-17
"仿微信6.2 UI界面最新出炉"这个主题，意味着我们有机会学习到一个与微信6.2版本相似的用户界面的设计思路和实现代码。这个项目可能是为了帮助开发者们更好地理解和创建类似微信的应用界面，提升用户体验。 首先，...
小程序省市区数据20191114刚出炉
11-14
小程序最新省市区数据，2019年11月14日，刚刚出炉，一个一个对照过来，全部真实数据，闲贵的找别人坑去吧，我是被坑了10积分才决定自己弄的。
NS高级字段帮助插件 Oracle NetSuite Advanced Field Help
01-13
NS高级字段帮助插件 Oracle NetSuite Advanced Field Help
仿淘宝商品属性选择页面（搬运工）
05-07
安卓仿淘宝的商品选择属性的效果，分单个标签属性和两个标签属性，标签之间存在联动效果。
jquery仿淘宝SKU选择商品属性代码.rar
10-07
jquery仿淘宝SKU选择商品属性代码，模拟淘宝SKU添加商品属性组合
仿淘宝源码
02-15
仿淘宝 android 源码
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
【Android开发—电商系列】（二）：仿淘宝商品属性标签页
热门推荐
To Begin,Begin　　
12-18 1万+
一睹为快需求 1.动态加载属性，如尺码，颜色，款式等 　　由于每件商品的属性是不确定的，有的商品的属性是颜色和尺码，有的是口味，有的是大小，所以这些属性不能直接写死到页面上。 2.动态加载属性下的标签 　　每个属性下的标签个数也不是一定的，比如有的商品的尺码是是S,M,XL，有的是均码，也就是每种属性的具体的内容是不一定的。 技术点 自定义ViewGroup，使
仿淘宝京东商品规格属性选择的最简单实现
gemgao的博客
06-18 5186
仿淘宝京东商品规格属性选择的最简单实现 商城里面的规格选择，网上大部分是自定义控件实现的，显得很是麻烦，而我的实现方式是大家最常用的控件RecyclerView，特点是性能好，简单。废话不多说，先看实现的效果图： 上图效果的实现主要是 RecyclerView和flowlayout（流式布局）. RecyclerView设置最大高度 如图规格多的时候，RecyclerView要有个最大高度，...
仿淘宝、京东多重商品属性组合Sku标签
qq_33973061的博客
10-23 1443
这是一个商品详情 商品属性选择 的一个Demo,属性个数无上限,一个或者多个都可以，布局全部可自定义,如淘宝、京东逻辑需求是一样的。
H.241协议详解：扩展视频规程与H.300系列终端控制
"H.241中文版，用于H.300系列终端的扩展视频规程与控制信号，是ITU-T发布的最新协议，适用于H.300系列视听终端，内容涉及高级视频编解码器的使用和扩展信令定义。" H.241协议是国际电信联盟(ITU-T)电信标准化部门...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值