京东网页制作之TAB切换栏（内含jquary筛选器介绍）

前言：
购物网站点击购物菜单页基本相同，包含商品详情、累计评价等，之前学习了HTML、css、JavaScript和jQuary，今天写个菜单页简单练习下。

京东商品详情菜单页如下：

淘宝商品详情菜单页如下：

点击商品介绍下方显示商品介绍，点击规格包装下方显示其相关内容，点击评价下方显示用户评价，鼠标悬停时背景颜色改变，要实现的就是这样一个效果。

定义css样式部分代码：

.tablemenu{width:700px;margin: 0 auto;border:1px solid #eee;}.menu{height:38px;background-color:#f7f7f7;line-height:38px;border-bottom:1px solid #e4393c;font-family: "microsoft yahei";color:#666;}.active{color:#fff;background-color:#e4393c;cursor:default;}.menu .menu-item{float:left;padding:0 30px;cursor:pointer;font-size: 14px;}.menu .menu-item:hover{color:#e4393c;}.content{min-height:200px;border:1px solid #eee;font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;}.hide{display:none;}.parameter{width:990px;color:#666;}ul li{list-style:none;}#parameter-brand li{width:50%;}.parameter ul li{float:left;padding-left:42px;margin-bottom:5px;}.parameter ul{overflow:hidden;}.parameter-list2 li{width:200px;}.content a{text-decoration:none;color:#5e69ad;}

主要定义菜单需要的样式，菜单的长宽高、鼠标点击到每一项内容时标红、鼠标放在每一个菜单上字体变红色，这些样式都是通过css来设置。

HTML部分代码：

<div class="tablemenu"><div class="menu"><div class="menu-item active">商品详情</div><div class="menu-item">规格包装</div><div class="menu-item">累计评价</div><div class="menu-item">售后保障</div></div><div class="content"><div class="parameter"><ul id="parameter-brand" class="parameter-list1"><li title="精气神">品牌:<a href="">精气神</a></li></ul><ul class="parameter-list2"><li title="精气神山黑猪肉">商品名称：精气神山黑猪肉</li><li title="1308692">商品编号：1308692</li><li title="420.22kg">商品毛重：420.22kg</li><li title="天津市静海县">商品产地：天津市静海县</li><li title="冷冻">保存状态：冷冻</li><li title="黑猪">品种：黑猪</li><li title="250g-500g">重量：250g-500g</li><li title="国产">国产/进口：国产</li><li title="简装">包装：简装</li><li title="猪肉馅">分类：猪肉馅</li><li title="中国大陆">原产地：中国大陆</li></ul></div><div class="hide">下面写包装内容</div><div class="hide">累计评价内容</div><div class="hide">售后保障与服务部分</div></div></div>

jQuery部分实现：

<script src="jquery-3.3.1.min.js"></script><script>$('.menu-item').click(function(){$(this).addClass('active').siblings().removeClass('active');$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');});</script>

首先要引入jquery，jQuery有链式操作，$(this)代表当前元素。
实现效果图如下：

jQuery样式操作：
addClass ：添加样式
removeClass ：删除样式
toggleClass ：如果存在（不存在）就删除（添加）一个类

jQuery筛选器：

       $('#i1').next()：ID=i1的下一个标签$('#i1').nextAll()：ID=i1的下面所有标签$('#i1').nextUntil('#ii1')：ID=i1的下一个标签，直到ID=ii1的标签为止。

例：

       <div><a>asdf</a><a>asdf</a><a id='i1'>asdf</a><a>asdf</a><a id='ii1'>asdf</a><a>asdf</a></div>

       $('#i1').prev()：id='i1'的前一个标签$('#i1').prevAll()：id='i1'的前面的标签$('#i1').prevUntil('#ii1')：id='i1'的前面标签，到id='ii1'为止$('#i1').parent()：id='i1'的父标签$('#i1').parents()：id='i1'的所有父标签，一直到最外层div$('#i1').parentsUntil()：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止$('#i1').children()：id='i1'的子元素的元素集合$('#i1').siblings()：id='i1'的兄弟元素的元素集合$('#i1').find()：搜索所有与指定表达式匹配的元素$('li:eq(1)')：匹配一个给定索引为1的元素$('li').eq(1)：同上first()：获取第一个元素last()：获取最后一个元素hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true

京东网页制作之TAB切换栏（内含jquary筛选器介绍）相关推荐

web前端之DOM操作——Tab切换栏的使用
Tab切换栏的详细解析下面给出京东某一页面的tab栏页面切换: 举例引入:鼠标悬停时,current元素的背景变色本段我们先举一个例子,因为这里用到了排他思想.对于理解tab切换,很有帮助. 完整 ...
jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...
弹性布局案例实操(京东网页制作的草稿)
CSS3的弹性布局_星辰镜的博客-CSDN博客上面的文章弹性布局的详细介绍: Css3的页面布局之定位_星辰镜的博客-CSDN博客上面的文章是定位的介绍 Day02 了解Html+CSS的学习内容 ...
Python网页抓取和Excel操作实战-基金筛选器
项目背景: 最近在研究基金,想找一些基金能和自己看中的股票能够匹配起来,发现工作量不小,需要去看每只股票的基金持仓情况,然后再去比较筛选,很花时间.于是想是否能利用Python来爬取股票的基金数据,然 ...
网页制作---眉头（导航栏）及页尾（版权信息）处理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
大一学生《Web编程基础》期末网页制作基于HTML+CSS+JavaScript响应式个人主页相册介绍模板
Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
linux下网页制作,linux网页制作
网页制作是Web应用的重要组成部分,这里介绍三款Linux桌面环境下的网页制作工具Screem.Bluefish和Quanta Plus,利用它们可以轻松制作网页. 在fedora里面可以只有用yum ...
HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...

京东网页制作之TAB切换栏（内含jquary筛选器介绍）

定义css样式部分代码：

HTML部分代码：

jQuery部分实现：

京东网页制作之TAB切换栏（内含jquary筛选器介绍）相关推荐

最新文章

热门文章