JS新人求助，关于不刷新整个网页动态切换DIV的问题

sLee1024 2018-10-15 01:29:35

各位大神你们好，本人最近在自学HTML和JS相关的东西，目前在着手搭建博客连手，我想请教一个关于div动态切换的问题：

我现在manu有“主页”、“软件”、“联系方式”，我主页的除manu以外的其他内容放在三个DIV里面，我现在想实现的功能是点击“软件”（软件放在一个表格里面），主页的manu不变，然后那三个DIV fadeout，最后表格fadein，请问这种大概是怎么实现的呢？我需要写个“software.html”还是我直接在index.html加个div software呢？希望各位大神能帮忙解答一下，不甚感激！

...全文

183 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

sLee1024 2018-10-16

打赏
举报

引用 1 楼 qq_41114603 的回复:

按你的思路实现的效果，tabs切换有很多方法，关键在于按钮和页面的对应关系



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .btns{

            position:fixed;

            top: 0;

            left: 0;

            z-index:999;

        }

        .body{

            width:100%;

            height:100%;

        }

        .list{

            box-sizing:border-box;

            padding-top:30px;

            position:absolute;

            left: 0;

            top: 0;

            width:100%;

            height:100%;

            display:none;

        }

        .list:nth-child(1){

            background-color:red;

        }

        .list:nth-child(2){

            background-color:blue;

        }

        .list:nth-child(3){

            background-color:green;

        }

    </style>

</head>

<body>

<div class="btns">

    <button>按钮一</button>

    <button>按钮二</button>

    <button>按钮三</button>

</div>

<div class="body">

    <div class="list">页面一</div>

    <div class="list">页面二</div>

    <div class="list">页面三</div>

</div>

<script src="../js/jquery@2.2.4.js"></script>

<script>

    $(function(){

        $("button").on("click",function(){

            $(".list").eq($(this).index()).fadeIn(1000).siblings().fadeOut(1000)

        })

    })

</script>

</body>

</html>

引用 1 楼 qq_41114603 的回复:

按你的思路实现的效果，tabs切换有很多方法，关键在于按钮和页面的对应关系



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .btns{

            position:fixed;

            top: 0;

            left: 0;

            z-index:999;

        }

        .body{

            width:100%;

            height:100%;

        }

        .list{

            box-sizing:border-box;

            padding-top:30px;

            position:absolute;

            left: 0;

            top: 0;

            width:100%;

            height:100%;

            display:none;

        }

        .list:nth-child(1){

            background-color:red;

        }

        .list:nth-child(2){

            background-color:blue;

        }

        .list:nth-child(3){

            background-color:green;

        }

    </style>

</head>

<body>

<div class="btns">

    <button>按钮一</button>

    <button>按钮二</button>

    <button>按钮三</button>

</div>

<div class="body">

    <div class="list">页面一</div>

    <div class="list">页面二</div>

    <div class="list">页面三</div>

</div>

<script src="../js/jquery@2.2.4.js"></script>

<script>

    $(function(){

        $("button").on("click",function(){

            $(".list").eq($(this).index()).fadeIn(1000).siblings().fadeOut(1000)

        })

    })

</script>

</body>

</html>

谢谢你的点拨，结合你的code我又查了查stack overflow 上面的信息现在已经大致实现了效果~

風灬雲 2018-10-15

打赏
举报

按你的思路实现的效果，tabs切换有很多方法，关键在于按钮和页面的对应关系



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .btns{

            position:fixed;

            top: 0;

            left: 0;

            z-index:999;

        }

        .body{

            width:100%;

            height:100%;

        }

        .list{

            box-sizing:border-box;

            padding-top:30px;

            position:absolute;

            left: 0;

            top: 0;

            width:100%;

            height:100%;

            display:none;

        }

        .list:nth-child(1){

            background-color:red;

        }

        .list:nth-child(2){

            background-color:blue;

        }

        .list:nth-child(3){

            background-color:green;

        }

    </style>

</head>

<body>

<div class="btns">

    <button>按钮一</button>

    <button>按钮二</button>

    <button>按钮三</button>

</div>

<div class="body">

    <div class="list">页面一</div>

    <div class="list">页面二</div>

    <div class="list">页面三</div>

</div>

<script src="../js/jquery@2.2.4.js"></script>

<script>

    $(function(){

        $("button").on("click",function(){

            $(".list").eq($(this).index()).fadeIn(1000).siblings().fadeOut(1000)

        })

    })

</script>

</body>

</html>