1.效果
2.代码
2.0 关键功能
οnmοuseοver="change('girl')" 函数的功能是鼠标放上时触发执行,change()方法中的参数‘girl’和
后面的id=‘gril’进行了绑定,所以当鼠标放上时,根据参数显示响应的区域。 css样式中:display: flex;为flexbox布局,默认水平方向布局。
2.1 HTML
<div id="box">
<div id="project">
<ul id="title">
<li οnmοuseοver="change('girl')"><a href="#">女装</a></li>
<li οnmοuseοver="change('boy')"><a href="#">男装</a></li>
<li οnmοuseοver="change('child')"><a href="#">童装</a></li>
</ul>
<ul id="content">
<li class="girl" id="girl">
<p> 服饰的变迁是一部历史,是一个时代发展的缩影。它是这个时代进步、文明、兴旺发达、繁荣昌盛的象征。
它在记录历史变革的同时,也映衬着一种民族的文化,传承着当地的历史文化风俗,女装更是其中不可缺少的一部分。
女士穿着的衣物统称为女装。女装品牌与款式的多元化推动了时装的发展。</p></li>
<li class="boy" id="boy">
<p> 男装是指男性穿于人体起保护和装饰作用的服饰制品。包括上装和下装,男装会根据季节和个人的不同有不同的款式和作用。</p></li>
<li class="child" id="child">
<p> 儿童服装简称童装,指适合儿童穿着的服装。按照年龄段分包括婴儿服装、幼儿服装、小童服装、中童服装、大童服装等。还包括中小学的校园服装等。按照衣服的类型分为:连体服,外套,裤子,卫衣,套装,T恤衫,鞋等。</p></li>
</ul>
</div>
</div>
2.2 CSS
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #222222;
}
#box #project{
width: 800px;
margin: 20px auto;
display: flex;
border: 1px solid #ff6666;
}
#box #project #title{
list-style: none;
text-align: center;
margin: 5px 5px auto;
}
#box #project #title li{
width: 15px;
margin-bottom: 20px;
font-size: 16px;
background-color: #FF8C00;
padding: 6px;
border:1px solid #cccccc;
border-radius: 6px;
}
#box #project #title li:hover{
background-color: #ff6666;
}
#box #project a{
color: #000000;
text-decoration: none;
}
#box #project #content{
list-style: none;
font-size: 14px;
margin: 10px;
}
.girl{
display: block;
}
.boy{
display: none;
}
.child{
display:none;
}
2.3 Javascript
<script>
function change(name) {
if (name =='girl'){
girl.style.display = 'block'
boy.style.display = 'none'
child.style.display = 'none'
}else if(name == 'boy'){
girl.style.display = 'none'
boy.style.display = 'block'
child.style.display = 'none'
}else if(name == 'child'){
girl.style.display = 'none'
boy.style.display = 'none'
child.style.display = 'block'
}
}
</script>