ps:代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作tab切换效果</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#title {
margin: 0 auto;
width: 170px;
height: 295px;
border-radius: 10px;
border: 1px solid black;
margin-top: 15px;
}
span {
font-size: 16px;
font-family: "宋体";
}
p:nth-child(1) {
margin: 5px 0px 2px 7px;
}
p:nth-child(2) {
font-size: 12px;
margin-left: 9px;
margin-bottom: 2px;
color: #3ad4bb;
}
ul {
margin: 3px 0px 10px 7px;
}
li {
border-radius: 3px;
border: 1px solid green;
background-color: #2b980c;
font-size: 14px;
display: inline;
padding: 2px 4px;
}
ul a {
text-decoration: none;
color: white;
}
#one a {
font-size: 15px;
text-decoration: none;
line-height: 27px;
color: black;
}
#two a {
font-size: 15px;
text-decoration: none;
line-height: 27px;
color: black;
}
#three a{
font-size: 15px;
text-decoration: none;
line-height: 27px;
color: black;
}
#one, #two, #three {
margin: 5px 0px 0px 7px;
}
</style>
</head>
<body>
<div id="title">
<p><span>图片周排行榜</span> TOP 100</p>
<p>近7天销量,每日更新</p>
<ul>
<li id="a" onmouseover="a()"><a href="#">小说</a></li>
<li id="b" onmouseover="b()"><a href="#">非小说</a></li>
<li id="c" onmouseover="c()"><a href="#">少儿</a></li>
</ul>
<div id="one" >
<a href="#">1.时间旅行者的妻子</a><br>
<a href="#">2.女心理师(下)</a><br>
<a href="#">3.鬼吹灯之精绝古城</a><br>
<a href="#">4.女心理师(上)</a><br>
<a href="#">5.小时候</a><br>
<a href="#">6.追风筝的人</a><br>
<a href="#">7.盗墓笔记2</a><br>
<a href="#">8.输赢</a><br>
</div>
<div id="two" style="display: none">
<a href="#">1.人生若只如初见</a><br>
<a href="#">2.高效能人士的七个..</a><br>
<a href="#">3.求医不如求己</a><br>
<a href="#">4.人体使用手册</a><br>
<a href="#">5.孩子,把你的手给我</a><br>
<a href="#">6.别笑!我是英文单词书</a><br>
<a href="#">7.人体经络使用手册</a><br>
<a href="#">8.股市稳赚</a><br>
</div>
<div id="three" style="display: none">
<a href="#">1.斯凯瑞金色童书・..</a><br>
<a href="#">2.哈利・波特与“混..</a><br>
<a href="#">3.不一样的卡梅拉(..</a><br>
<a href="#">4.它们是怎么来的</a><br>
<a href="#">5.五・三班的坏小子..</a><br>
<a href="#">6.男生日记</a><br>
<a href="#">7.哈利・波特与魔法石</a><br>
<a href="#">8.噼里啪啦丛书(全7册)</a><br>
</div>
</div>
<script type="text/javascript">
function a() {
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";
}
function b(){
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
document.getElementById("three").style.display="none";
}
function c() {
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="block";
}
</script>
</body>
</html>
ps:亲测,靠人不如靠己,想在网上找html源代码,那是不太可能,至少我是没找到,没人会闲到这种程度,但是! ! ! 我这里就有~我当然不是闲的发慌,完成之前我也想着找找看有没有源代码,因为有源代码多方便啊,我就可以直接分情况弄函数,使用鼠标移入事件,直接调用…结果…找不到,不过,后续的脚本代码倒是一大堆,有些人写的我看不懂,我就找个最简单也最通俗易懂的吧,今天,也要加油哦!借鉴的同时,一定一定要思考! ! ! 不然只是看完就过是没用的.
真的,思考一下,就会觉得容易的,一遍不行就两遍,两遍不行就三遍,以此类推! 不怕笨人,就怕懒人! ! !所以,我就算是个笨人,也不能懒~