黑马程序员技术交流社区
标题:
【上海校区】jq对tab操作，鼠标点击展示对应的图片展示
[打印本页]
作者:
梦缠绕的时候
时间:
2018-7-24 09:47
标题:
【上海校区】jq对tab操作，鼠标点击展示对应的图片展示
4张图片自己找几张替换在对应文件，引入对应的js文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin
:
0
;
padding
:
0
;
}
ul
{
list-style
: none;
}
.wrapper
{
width
:
1000px
;
height
:
475px
;
margin
:
0
auto;
margin-top
:
100px
;
}
.tab
{
border
:
1px
solid
#ddd
;
border-bottom
:
0
;
height
:
36px
;
width
:
320px
;
}
.tab
li
{
position
: relative;
float
: left;
width
:
80px
;
height
:
34px
;
line-height
:
34px
;
text-align
: center;
cursor
: pointer;
border-top
:
4px
solid
#fff
;
}
.tab
span
{
position
: absolute;
right
:
0
;
top
:
10px
;
background
:
#ddd
;
width
:
1px
;
height
:
14px
;
overflow
: hidden;
}
.products
{
width
:
1002px
;
border
:
1px
solid
#ddd
;
height
:
476px
;
}
.products
.main
{
float
: left;
display
: none;
}
.products
.main
.selected
{
display
: block;
}
.tab
li
.active
{
border-color
: red;
border-bottom
:
0
;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(
".tab-item"
).mouseenter(function () {
//两件事件
$(
this
).addClass(
"active"
).siblings().removeClass(
"active"
);
var
idx = $(
this
).index();
$(
".main"
).eq(idx).addClass(
"selected"
).siblings().removeClass(
"selected"
);
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2