~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW
作者：黄瑞民
撰写时间：2021/11/18
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
给大家分享一个案例（tab选项卡）
<html>
<head>
<meta charset="utf-8">
<title>tab选项卡</title>
<style>
*{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
.tabBox{
width: 400px;
margin: 40px auto;
border: 1px solid #ccc;
}
.tab_head{
height: 30px;
background: #f2f2f2;
}
.tab_head li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.tab_head li.on{
background: #fff;
color: red;
font-weight: bold;
}
.mod div{
float: left;
margin-top: 10px;
width: 180px;
text-align: center;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom:1;
}
.tab_con{
padding: 5px 15px 15px 15px;
}
.mod button{
padding: 2px 6px;
}
.mod button:hover{
color: blue;
}
</style>
</head>
<body>
<div class="tabBox">
<div class="tab_head" id="tabHead">
<ul>
<li class="on">电脑体检</li>
<li>查杀木马</li>
<li>管理软件</li>
<li>求助中心</li>
</ul>
</div>
<div class="tab_con" id="tabCon">
<div class="mod clearfix">
<div class="up_lf">
<button>快速体检</button>
<span>快速电脑体检</span>
</div>
<div class="up_rg">
<button>电脑加速</button>
<span>一键快速扫描</span>
</div>
<div class="under_lf">
<button>垃圾清理</button>
<span>扫描电脑垃圾</span>
</div>
<div class="under_rg">
<button>软件扫描</button>
<span>快速软件扫描</span>
</div>
</div>
<div class="mod clearfix" style="display: none;">
<div class="up_lf">
<button>快速扫描</button>
<span>快速扫描木马</span>
</div>
<div class="up_rg">
<button>特殊扫描</button>
<span>重点区域扫描</span>
</div>
<div class="under_lf">
<button>全盘扫描</button>
<span>全盘扫描木马</span>
</div>
<div class="under_rg">
<button>闪电扫描</button>
<span>闪电扫描木马</span>
</div>
</div>
<div class="mod clearfix" style="display: none;">
<div class="up_lf">
<button>升级软件</button>
<span>一键软件升级</span>
</div>
<div class="up_rg">
<button>卸载软件</button>
<span>清理软件内存</span>
</div>
<div class="under_lf">
<button>权限雷达</button>
<span>检测软件权限</span>
</div>
<div class="under_rg">
<button>软件资源</button>
<span>软件资源下载</span>
</div>
</div>
<div class="mod clearfix" style="display: none;">
<div class="up_lf">
<button>电脑工具</button>
<span>常用电脑工具</span>
</div>
<div class="up_rg">
<button>电脑诊所</button>
<span>电脑问题诊断</span>
</div>
<div class="under_lf">
<button>硬件检测</button>
<span>全盘硬件扫描</span>
</div>
<div class="under_rg">
<button>修复漏洞</button>
<span>扫描修复漏洞</span>
</div>
</div>
</div>
</div>
<script>
// JavaScript Document
//页面加载事件
window.onload = function(){
//获取选项卡按钮
var btnList = document.getElementById("tabHead").getElementsByTagName("li");
//获取选项卡内容盒子
var modList = document.getElementById("tabCon").getElementsByClassName("mod");
//判断选项卡按钮个数与选项卡内容盒子个数是否一致
if(btnList.length != modList.length){
return;//停止函数
}
//遍历循环所有按钮，为按钮绑定点击事件
for(var i = 0;i<btnList.length;i++){
btnList[i].id = i;
btnList[i].onmouseover = function(){
//alert(i);
//按钮高亮效果的切换
//遍历所有按钮，移除当前高亮效果按钮的类on
for(var j = 0;j<btnList.length;j++){
if(btnList[j].className === "on"){
btnList[j].className = "";
modList[j].style.display = "none";
}
}
this.className = "on" ;
modList[this.id].style.display = "block";
}
}
}
</script>
</body>
</html>
以上是本次案例的分享代码
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
