JS选项卡、简单而有效

2021年 1月 25日 1592点热度 0人点赞 0条评论

null

 

<!DOCTYPE html>

<head>
<script language="javascript">
function showDiv(objId) {
var objDiv = document.getElementById(objId);
var objDiv1 = document.getElementById("div1");
var objDiv2 = document.getElementById("div2");
var objDiv3 = document.getElementById("div3");
objDiv1.style.display = "none";
objDiv2.style.display = "none";
objDiv3.style.display = "none";
objDiv.style.display = "";
}
</script>
</head>

<body style="margin:0 auto;max-width: 644px">
<div style="float:left; margin:0 auto; width:100%; padding-left:40px; line-height:25px;">
<ul style="margin-top: -200px;">
<li style="float: left;width: 33%;list-style:none">
<a href="javascript:showDiv('div1');">div1内容</a>
</li>
<li style="float: left;width: 33%;list-style:none">
<a href="javascript:showDiv('div2');">div2内容</a>
</li>
<li style="float: left;width: 33%;list-style:none">
<a href="javascript:showDiv('div3');">div3内容</a>
</li>
</ul>
</div>
<div style="margin-top: 300px">
<div id="div1" align="center" style="color: #fff; display:;width: 100%;height: 300px;background-color: #3f51b5 ">
div1内容
</div>
<div id="div2" align="center" style="color: #fff;display:none;width: 100%;height: 300px;background-color: #000 ">
div2内容
</div>
<div id="div3" align="center" style="color: #fff;display:none;width: 100%;height: 300px;background-color: red ">
div3内容
</div>
</body>

</html>

xinfa

这个人很懒,什么都没留下