html5 选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{margin: 0;padding: 0;}
ul li{
padding: 3%;
list-style: none;
width: 33.3%;
float: left;
box-sizing: border-box;
}
ul li img{
width: 100%;
display: block;
}
.pox{
font-size: 30px;
}
.show img{
width: 50%;
padding: 3%;
}
@media only screen and (min-width:960px){
html{
font-size: 19px;
}
}
@media only screen and (max-width:959px){
html{
font-size: 15px;
}
ul li{
width: 50%;
}
.pox{
font-size: 20px;
}
}
@media only screen and (max-width:767px){
html{
font-size: 12px;
}
ul li{
width: 100%;
float: none;
}
.pox{
font-size:12px;
}
}
.dn{
display: none;
}
/*html{
font-size: 20px;
}*/
/*.box{
box-sizing: border-box;
width: 100%;
height: 26.9rem; 乘以根元素10px
background: url(images/caodi.png) no-repeat center top ;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
} */
</style>
</head>
<body>
<div class="pox">
hello,world!
</div>
<div class="box">
<ul class="ul-Pic TAB" id=".show">
<li><img src="images/banner1.png" alt="" ></li>
<li><img src="images/banner2.png" alt="" ></li>
<li> <img src="images/banner3.png" alt=""></li>
</ul>
</div>
<div class="show">
<dl>
<dt>001</dt>
<img src="images/g1.jpg" alt="">
</dl>
</div>
<div class="show dn">
<dl>
<dt>002</dt>
<img src="images/g4.jpg" alt="">
</dl>
</div>
<div class="show dn">
<dl>
<dt>003</dt>
<img src="images/g3.jpg" alt="">
</dl>
</div>
<script src="js/jquery.js"> </script>
<script>
// 鼠标经过选项卡
$(".TAB li").mousemove(function(){
var $vv=$(this).parent(".TAB").attr("id");
$($vv).hide();
$(this).parent(".TAB").find("li").removeClass("hover");
var xx=$(this).parent(".TAB").find("li").index(this);
$($vv).eq(xx).show();
$(this).addClass("hover");
});
// 鼠标点击选项卡
// $(".TAB_CLIKE li").click(function(){
// var $vv=$(this).parent(".TAB").attr("id");
// $($vv).hide();
// $(this).parent(".TAB").find("li").removeClass("hover");
// var xx=$(this).parent(".TAB").find("li").index(this);
// $($vv).eq(xx).show();
// $(this).addClass("hover");
// });
</script>
</body>
</html>
