鼠标经过内容变换

最新推荐文章于 2026-08-05 17:05:46 发布

转载最新推荐文章于 2026-08-05 17:05:46 发布 · 1.2k 阅读

收录于

特效

本文介绍了一种使用HTML和JavaScript实现的标签切换内容效果的方法。通过简单的代码示例，展示了如何根据不同的标签来显示对应的内容区域，同时隐藏其他内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>不同标题切换不同内容</title>

<style type="text/css">
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
</style>
<script type="text/javascript">
function showdiv(s){
if(s=="1"){
document.getElementById("content1").className="contentin contentfirst";//显示标题1的内容下面代码类似不在添加注释
document.getElementById("content2").className="contentfirst";//隐藏标题2的内容下面代码类似不在添加注释
document.getElementById("content3").className="contentfirst";//隐藏标题3的内容下面代码类似不在添加注释

document.getElementById("li2").className=null;//使标题2与正文内容相离下面代码类似不在添加注释
document.getElementById("li1").className="tabin";//使标题一与正文内容相连接下面代码类似不在添加注释
document.getElementById("li3").className=null;//使标题3与正文内容相离下面代码类似不在添加注释

}else if(s=="2"){
document.getElementById("content1").className="contentfirst";
document.getElementById("content2").className="contentin contentfirst";
document.getElementById("content3").className="contentfirst";

document.getElementById("li1").className=null;
document.getElementById("li2").className="tabin";
document.getElementById("li3").className=null;
}else{
document.getElementById("content1").className="contentfirst";
document.getElementById("content3").className="contentin contentfirst";
document.getElementById("content2").className="contentfirst";

     document.getElementById("li1").className=null
document.getElementById("li3").className="tabin";
document.getElementById("li2").className=null
}
}
</script>
</head>
<body>
<ul id="tabfirst">
   <li class='tabin' id="li1" > <a href="#" onMouseOver="showdiv('1')"> 01 </a></li>
   <li id="li2"> <a href="#" onMouseOver="showdiv('2')"> 02 </a></li>
   <li id="li3"> <a href="#" onMouseOver="showdiv('3')"> 03 </a></li>
</ul>
<div class="contentin contentfirst" id="content1">我是第一个内容</div>
<div class="contentfirst" id="content2">我是第二个内容</div>
<div class="contentfirst" id="content3">我是第三个内容</div>

</body>
</html>