仿京东商城商品分类搜索功能

最终实现效果如下图所示：

初步布局实现：

初步布局代码如下所示：

                         <div class="choose"><ul class="content"><li><span class="jiacu">企业规模</span> <span class="intro"><a href="javascript:;">微型 </a><a href="javascript:;">小型</a> <a href="javascript:;">大型</a> <a href="javascript:;">中型</a></span> </li><li><span class="jiacu">企业类型</span> <span class="intro"><a href="javascript:;">成熟</a> <a href="javascript:;">大集团</a><a href="javascript:;"> 初创</a> <a href="javascript:;">成长</a></span></li></ul></div><div class="con"><ul><li class="chosed" id="chosed"><span>您已选择：</span><span class="intro"><span> </span><span> </span><span> </span><span> </span><span> </span></span></li></ul></div>

2.jQuery效果实现代码如下(在引入此段代码之前记得要先将js的基础包引入，此处我用的是jquery-1.11.2.min.js)：

/*<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
*/
$(function () {$(".content .intro a").click(function () {// 获取最下面空的spanvar chosediterm = $(".chosed .intro");//匹配【li】并返回位置//$(this) 是指选中的a 标签对象var li_index = $(this).closest("li").index();//closest("li")获取祖先元素//给选中的a 标签的内容末尾加Xvar txt = $(this).text() + "<em>X</em>";//移除与选中标签同辈元素的class=selected// 属性，并设置字体颜色。最后为选中标签添加 class=selected//属性，并设置字体颜色//$(this).siblings().removeClass("selected").css("color", "#3366cc")/*.end()*/.addClass("selected").css("color", "red");$(this)/*.end()*/.addClass("selected").css("color", "red").siblings().removeClass("selected").css("color", "#3366cc");//把每个li里面的a插入到对应的span里面，这样同时解决了两个问题：修改选项同步，每个li只能有一个spanchosediterm.find("span").eq(li_index).html(txt).css("display", "inline-block");//========================================// 通过点击 X 关闭span$(".chosed .intro em").click(function () {var index = $(this).parent("span").index();$("li:not('.chosed')").find(".intro a").removeClass("selected").css("color", "#3366cc");$(this).parent("span").empty().css("display", "none");});//当span的个数大于1就会出现clear按钮把所有的span都清除var len = chosediterm.find("span").has("em").length;//获取到用户选到的值，末尾带Xvar tags = chosediterm.find("span").text();$(".chosed .intro span em").css({"text-align": "center","background": "#ff6600","color": "#fff","font-size": "14px","font-weight": "bold","font-style": "normal","cursor": "pointer"});if (len > 2) {var clr = "<a href='javascript:;' class='clear' id='clear'>清除筛选条件</a>";$("#clear").remove();$(".chosed .intro").append(clr);}$(".clear").click(function () {$(".chosed .intro span").text("").css("display", "none");$("li:not('.chosed')").find(".intro a").removeClass("selected").css("color", "#3366cc");$(this).remove();});});
});

此文为《一起学编程》原创内容，特此声明

仿京东商城商品分类搜索功能相关推荐

基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)
网上购物商城系统以弥补传统购物方式的弊端.在目前的商城里,如果采用网上商城方式,用户购物时就不需要到店里面排队,这样不仅能实时地了解商品的特色,而且方便了顾客,同时也减轻了商城的服务压力.随着WLAN ...
【android】高仿京东商城App，集成react-native热更功能
简介高仿京东商城项目具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,功能还在持续更新中-如果对你有帮助,给个star 使用kotlin语言开发,项目使用模块化开发,降低 ...
高仿京东商城app、集成react-native热更新功能
简介这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
仿手机端京东商城html源码_web前端入门到实战：制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能一.html代码已选条件: 品牌: 全部惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕戴尔三星索尼东芝 ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
高仿京东商城App，集成react-native 热更新功能
前言这是一个高仿京东商城的android 混合项目,具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,使用最新MVI架构开发 kotlin . retrofit2 + o ...
【源码分享下载】每日更新之高仿京东商城
高仿京东商城服务分类: 其他使用服务: 其他功能分类: 生活支持平台: Android 运行环境: Android 开发语言: Java 开发工具: Eclipse 源码大小: 5.51MB ...
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录注册首页购物商品详情 ,等多个页面~特别适合web期末 ...

仿京东商城商品分类搜索功能

仿京东商城商品分类搜索功能相关推荐

最新文章

热门文章