版权声明：转载请标明出处 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