js第三章简答题5(制作如图所示的Tab切换效果)_js应用滑动门技术实现著名小说和经典小说之间的切换。-CSDN博客

本文链接：https://blog.csdn.net/weixin_44100210/article/details/90265080

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>&nbsp;&nbsp;TOP&nbsp;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源代码,那是不太可能,至少我是没找到,没人会闲到这种程度,但是! ! ! 我这里就有~我当然不是闲的发慌,完成之前我也想着找找看有没有源代码,因为有源代码多方便啊,我就可以直接分情况弄函数,使用鼠标移入事件,直接调用…结果…找不到,不过,后续的脚本代码倒是一大堆,有些人写的我看不懂,我就找个最简单也最通俗易懂的吧,今天,也要加油哦!借鉴的同时,一定一定要思考! ! ! 不然只是看完就过是没用的.
真的,思考一下,就会觉得容易的,一遍不行就两遍,两遍不行就三遍,以此类推! 不怕笨人,就怕懒人! ! !所以,我就算是个笨人,也不能懒~