html+css+js TAB切换

最新推荐文章于 2023-05-10 16:06:21 发布

月薪不过5000不改名

最新推荐文章于 2023-05-10 16:06:21 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/Infatuatedmonkey/article/details/124331649

版权

1，效果图
tab切换
2.html部分

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>TAB切换</title>
	<link href="css/tab.css" rel="stylesheet">
</head>

<body>
<div class="div_bg">
	<ul>
		<li id="bg1"><a class="white" onmousemove="chgtt(1);">小说</a></li>
		<li id="bg2"><a class="white" onmouseover="chgtt(2);">非小说</a></li>
		<li id="bg3" ><a class="white" onmouseover="chgtt(3);">少儿</a></li>
	</ul>
	<div id="book1">
		<a  href="#" target=_blank>1.时间旅行者的妻子</a><br>
		<a   href="#" target=_blank>2.女心理师（下）</a><br>
		<a   href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
		<a   href="#" target=_blank>4.女心理师（上）</a><br>
		<a   href="#" target=_blank>5.小时候</a><br>
		<a   href="#" target=_blank>6.追风筝的人</a><br>
		<a   href="#" target=_blank>7.盗墓笔记2</a><br>
		<a   href="#" target=_blank>8.输赢</a>
	</div>
	<div id="book2">
		<a   href="#" target=_blank>1.人生若只如初见</a><br>
		<a   href="#" target=_blank>2.高效能人士的七个..</a><br>
		<a   href="#" target=_blank>3.求医不如求己</a><br>
		<a   href="#" target=_blank>4.人体使用手册</a><br>
		<a   href="#" target=_blank>5.孩子，把你的手给我</a><br>
		<a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>
		<a   href="#" target=_blank>7.人体经络使用手册</a><br>
		<a   href="#" target=_blank>8.股市稳赚</a>
	</div>
	<div id="book3">
		<a   href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
		<a   href="#" target=_blank>2.哈利・波特与“混..</a><br>
		<a   href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
		<a   href="#" target=_blank>4.它们是怎么来的</a><br>
		<a   href="#" target=_blank>5.五・三班的坏小子..</a><br>
		<a   href="#" target=_blank>6.男生日记</a><br>
		<a   href="#" target=_blank>7.哈利・波特与魔法石</a><br>
		<a   href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
	</div>
</div>
 <script src="js/tab.js"></script>

</body>
</html>

3.css部分

*{
    margin:0;
    padding: 0;
    font-family: "Arial", "微软雅黑";
    font-size: 12px;
    line-height: 23px;
}
ul,li{list-style: none;}
li{float: left; margin-right: 1px;}
.div_bg{
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:169px;
    height:290px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 50px 0 0 15px;
}
.div_bg div{
    clear: both; padding-top: 10px;}
.white{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
.white:hover{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
a {
    color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
    color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(../images/menu1.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;}

.nobg{background-image:url(../images/menu2.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;
}

4.js部分


function chgtt(d1)	{
    //设当前显示层
    var NowFrame;
    if(Number(d1))	{
        NowFrame=d1;
    }
    else
    {
        NowFrame=1;
    }

    for(var i=1;i<=3;i++){
        if(i==NowFrame)	{
            document.getElementById("book"+NowFrame).style.display ="block";   //当前层
            document.getElementById("bg"+NowFrame).className="bg";
        }
        else
        {
            document.getElementById("book"+i).style.display ="none";    //隐藏其他层
            document.getElementById("bg"+i).className="nobg";
        }
    }

}
window.onLoad=chgtt() ;

记录每一个前端小案例！！！！

月薪不过5000不改名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css+js TAB切换

1，效果图2.html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"><title>TAB切换</title> <link href="css/tab.css" rel="stylesheet"></head><body><div class="div_bg"> <ul>
复制链接

扫一扫