- 纯CSS实现Tab切换
- 效果图
- 思路
- 代码
- CSSJS实现Tab切换
- 效果图
- 思路
纯CSS实现Tab切换
效果图
思路
ul li显示tab列表 li里面嵌套子div 显示详情
子div采用绝对布局 （让所有的子div都重叠在一个地方）
然后全部隐藏 在li的hover 时使其显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
list-style: none;
}
#main{
width: px;
}
div{
display: none;
position: absolute;
left: %;
top: %;
}
.test{
background-color: #c8f7ff;
}
.test:hover{
background-color: cornflowerblue;
}
.test:hover div{
display: block;
background-color: bisque;
}
</style>
</head>
<body>
<ul id="main">
<li class="test">手机
<div>
<ul>
<li>小米</li>
<li>华为</li>
<li>中兴</li>
</ul>
</div>
</li>
<li class="test">家电
<div>
<ul>
<li>空调</li>
<li>冰箱</li>
<li>洗衣机</li>
</ul>
</div>
</li>
<li class="test">家具
<div>
<ul>
<li>沙发</li>
<li>茶几</li>
<li>衣橱</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
CSS+JS实现Tab切换
效果图：
思路：
和纯CSS 差不多 先布局出来 然后 子div全部隐藏 不同的是 这里通过代码控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: px;
background-color: cadetblue;
}
.title {
width: %;
height: px;
}
.title_i {
line-height: px;
text-align: center;
width: px;
height: px;
float: left;
margin-right: px;
}
.content {
width: px;
height: px;
background-color: #c8f7ff;
position: relative;
}
.content_i {
position: absolute;
opacity: ;
}
.title_i_active {
background-color: #ffffff;
}
.content_i_active {
opacity: ;
}
</style>
</head>
<body>
<div class="box">
<div class="title" id="temptitle">
<div class="title_i" id="title_{{index}}" onclick="select({{index}})">{{title}}</div>
<!--title end-->
</div>
<!--title end-->
<div class="content" id="tempcontent">
<ul class="content_i" id="content_{{index}}">
{{str}}
</ul>
</div>
<!--content end-->
</div>
<!--box end-->
</body>
<script>
// 1 准备数据
var data = [
{
title: "房产",
content: ["275万购昌平邻铁三居 总价20万买一居", "200万内购五环三居 140万安家东三环", "北京首现零首付楼盘 53万购东5环50平", "京楼盘直降5000 中信府 公园楼王现房"]
},
{
title: "家居",
content: ["40平出租屋大改造 美少女的混搭小窝", "经典清新简欧爱家 90平老房焕发新生", "新中式的酷色温情 66平撞色活泼家居", " 瓷砖就像选好老婆 卫生间烟道的设计"]
},
{
title: "二手房",
content: ["通州豪华3居260万 二环稀缺2居250w甩", "西3环通透2居290万 130万2居限量抢购", "黄城根小学学区仅260万 121平70万抛!", "独家别墅280万 苏州桥2居优惠价248万"]
}
]
// 2 写入数据
function writeData() {
//2.1 拿到模版
var mobantitle = g("temptitle").innerHTML;
var mobancontent = g("tempcontent").innerHTML;
var titleArr = [];
var contentArr = [];
//2.2 写入
for (i in data) {
titleArr[i] = mobantitle.replace(/{{index}}/g, i)
.replace(/{{title}}/g, data[i].title);
var str="";
for (var j = ; j < data[i].content.length; j++) {
str+="<li>"+data[i].content[j]+"</li>"
}
contentArr[i] = mobancontent.replace(/{{index}}/g, i)
.replace(/{{str}}/g,str);
}
g("temptitle").innerHTML = titleArr.join("");
g("tempcontent").innerHTML = contentArr.join("");
}
// 3 选择 方法
function select(n){
var titles=g(".title_i");
var content=g(".content_i");
for(var i=;i<titles.length;i++){
titles[i].className="title_i";
content[i].className="content_i";
}
var title_new=g("title_"+n);
var content_new=g("content_"+n);
title_new.className+=" title_i_active";
content_new.className+=" content_i_active"
}
window.onload = function () {
writeData();
}
function g(key) {
if (key.charAt() == ".") {
key = key.substr();
return document.getElementsByClassName(key);
}
else {
return document.getElementById(key);
}
}
</script>
</html>