<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
ul {list-style: none;}
.box {
width: 1000px;height: 475px;margin: 100px auto;
}
.tab {
border: 1px solid rgba(205, 211, 211, 0.87); height: 36px;width: 320px;
}
.tab-item {
width: 80px;height: 34px;float: left;line-height: 34px;
text-align: center;border-top: 3px solid white;
/* 3px是为了去掉和hover状态下3pxborder-top的变化过程 */
}
span {
padding-left: 5px; color: rgba(205, 211, 211, 0.87);
}
.tab-item:hover {border-top: 3px solid red;}
.active {border-top: 3px solid red;}
.products {border: 1px solid rgba(205, 211, 211, 0.87);}
.products .main {display: none;}
.products .selected {display: block;}
</style>
</head>
<body>
<div class="box">
<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="images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
href="###"> <a <IMG the src = "Images / nanshijingpin.jpg" Alt = "" /> </a>
</ div>
</ div>
</ div>
<Script the src = "HTTPS: //cdn.bootcss.com/jquery/3.4.1/jquery.js "> </ Script>
<Script>
$ ( function () {
$ ( " Li "). MouseEnter ( function () {
$ ( the this ). addClass ( "active" );
$ ( the this .) .siblings () removeClass ( "active" );
// to li registered event, this add active at the same time remove the other neighboring brothers of active
var IDX = $ ( the this ) .index ();// The current index is placed in idx
. $ (. "main") EQ (IDX) .addClass ( "Selected") SIBLINGS () removeClass ( "Selected.". );
// .main added in the current index selected, remove other Selected
});
});
</ Script>
</ body>
</ HTML>