版权声明:转载请标明出处 https://blog.csdn.net/w1418899532/article/details/82718560
前言:
购物网站点击购物菜单页基本相同,包含商品详情、累计评价等,之前学习了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