Итак, я делаю простой сайт с 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');
}});
});
});