Question

因此，我正在制作一个简单的网站，其登录页面上有3个按钮。当您单击这些按钮时，我想使用ajax更改内容。我的问题是，当我单击导航栏上的徽标时，应该返回到登录页面，但是登录页面@extends包含导航栏和所有其他视图，因此它会在另一个视图内重复。如果删除@extends，则无法创建视图

https://gyazo.com/6979d018cabdfaba7f5ee60257ccbb69

另外，过了一会儿它开始做奇怪的事情： https://gyazo.com/6d634faa54c46512ac353c8d6d2c48b5

这是我的主布局，所有其他视图扩展了该视图：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
        <link rel="stylesheet" type="text/css" href="css/app.css">
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
         <nav class="navbar sticky-top navbar-light bg-light">
            <div class="navbar-brand mx-auto">
                <img id="brand" src="images/imp_logo.png" width="125" height="100" class="d-inline-block align-top" alt="">
            </div>
        </nav>
         <div class="blur">
            <div class="background-image"></div>
        </div>
        <title></title>
    </head>
    <body>
        <div id="app">
            <div class="container">
                @yield('content')

            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

这是我的主要视图，其中包含按钮（它们是div，但我仅将其称为按钮）：

@extends('master')

@section('content')
<br><br><br>
                <div class="row">
                    <div class="holder mx-auto">
                        <div class="col-12" style="">
                            <div id="button1" class="square-box">
                                <img class="icon" src="https://i.ibb.co/hDZ6SBF/image-icon.png" width="65px" height="50px"><br><br>
                                <span class="square-text">Trabajos</span>
                            </div>

                            <div id="button2" class="square-box">
                                <img class="icon" src="https://i.ibb.co/25105xy/5a4525b2546ddca7e1fcbc82.png" alt="5a4525b2546ddca7e1fcbc82" width="55px" height="50px"><br><br>
                                <span class="square-text">Contacto</span>
                            </div>

                            <div id="button3" class="square-box">
                                <img class="icon" src="https://i.ibb.co/sj5cBdh/img-466165.png" width="65px" height="50px"><br><br>
                                <span class="square-text">Empresa</span>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
@endsection

这是我的js文件：


$(document).ready(function(){

    $(document).on('click', '#button1', function() {
    $.ajax({url:'/trabajos',success:function(result) {
        $("#app").html(result).fadeIn('slow');
    }});
    });

    $(document).on('click', '#button2', function() {
    $.ajax({url:'/contacto',success:function(result) {
        $("#app").html(result).fadeIn('slow');
    }});
    });

    $(document).on('click', '#button3', function() {
    $.ajax({url:'/empresa',success:function(result) {
        $("#app").html(result).fadeIn('slow');
    }});
    });

    $(document).on('click', '#brand', function() {
    $.ajax({url:'/',success:function(result) {
        $("#app").html(result).fadeIn('slow');
    }});
    });



});

无法“扩展”导航栏，因为返回登录页面时会重复

0 个答案: