Laravel 布局保持导航 link 具有不同的背景
Laravel layout keep the nav link with different background
我正在制作仪表板。它的布局包含在所有仪表板页面中,并且包含 links。我需要指定具有不同背景的活动页面 link。
我编写了下面的代码来执行此操作,但是当我单击 link 时,它会重新加载页面以转到请求的页面并刷新布局,所有内容 returns 都为默认值。
处理这个问题最简单的方法是什么?
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
$('.sidebar-link').removeClass('active');
$(this).addClass('active');
});
});
.sidebar {
width: 250px;
height: 100vh;
background-color: #9E852D;
}
.main {
width: 100%;
height: 100vh;
background-color: #FFF;
}
.exit-dashboard {
width: 30px;
height: 30px;
position: fixed;
right: 0;
top: 610px;
background-color: #B79B3A;
color: #FFF;
z-index: 9999999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/40a844b83b.js" crossorigin="anonymous"></script>
@yield('styles')
<div class="exit-dashboard d-flex justify-content-center align-items-center">
<a href="{{ route('home') }}" class="a-reset">
<i class="fa-solid fa-globe"></i>
</a>
</div>
<div class="d-flex">
<div class="sidebar">
<div class="sidebar-img text-center pt-5">
<img src="{{ asset('images/location-hover-icon.png') }}" class="w-50">
</div>
<div class="sidebar-links pt-5">
<div class="row flex-column">
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
<a href="{{ route('dashboard.october.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity October</h6>
</div>
</a>
<a href="{{ route('dashboard.october.chillout.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Chillout October</h6>
</div>
</a>
<a href="{{ route('dashboard.rashikma.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Ras El Hikma</h6>
</div>
</a>
</a>
</div>
</div>
</div>
<div class="main p-5">
<h3 class="text-white nexa-bold pb-4">@yield('tab-title')</h3>
<div>
@yield('content')
</div>
</div>
</div>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dashboard_layout.js') }}"></script>
@yield('scripts')
您可以使用Route faced 来查看活动路线。它将检查活动路由是否相同,并将 return true 或 false,使用它我们可以创建三元条件。
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="{{Route::is('dashboard.newcairo.interests') ? 'active' : 'sidebar-link'}} py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
</a>
我正在制作仪表板。它的布局包含在所有仪表板页面中,并且包含 links。我需要指定具有不同背景的活动页面 link。
我编写了下面的代码来执行此操作,但是当我单击 link 时,它会重新加载页面以转到请求的页面并刷新布局,所有内容 returns 都为默认值。
处理这个问题最简单的方法是什么?
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
$('.sidebar-link').removeClass('active');
$(this).addClass('active');
});
});
.sidebar {
width: 250px;
height: 100vh;
background-color: #9E852D;
}
.main {
width: 100%;
height: 100vh;
background-color: #FFF;
}
.exit-dashboard {
width: 30px;
height: 30px;
position: fixed;
right: 0;
top: 610px;
background-color: #B79B3A;
color: #FFF;
z-index: 9999999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/40a844b83b.js" crossorigin="anonymous"></script>
@yield('styles')
<div class="exit-dashboard d-flex justify-content-center align-items-center">
<a href="{{ route('home') }}" class="a-reset">
<i class="fa-solid fa-globe"></i>
</a>
</div>
<div class="d-flex">
<div class="sidebar">
<div class="sidebar-img text-center pt-5">
<img src="{{ asset('images/location-hover-icon.png') }}" class="w-50">
</div>
<div class="sidebar-links pt-5">
<div class="row flex-column">
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
<a href="{{ route('dashboard.october.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity October</h6>
</div>
</a>
<a href="{{ route('dashboard.october.chillout.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Chillout October</h6>
</div>
</a>
<a href="{{ route('dashboard.rashikma.interests') }}" class="a-reset">
<div class="sidebar-link py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">Ras El Hikma</h6>
</div>
</a>
</a>
</div>
</div>
</div>
<div class="main p-5">
<h3 class="text-white nexa-bold pb-4">@yield('tab-title')</h3>
<div>
@yield('content')
</div>
</div>
</div>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dashboard_layout.js') }}"></script>
@yield('scripts')
您可以使用Route faced 来查看活动路线。它将检查活动路由是否相同,并将 return true 或 false,使用它我们可以创建三元条件。
<a href="#" class="a-reset">
<a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
<div class="{{Route::is('dashboard.newcairo.interests') ? 'active' : 'sidebar-link'}} py-2">
<i class="fa-solid fa-envelope px-2"></i>
<h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
</div>
</a>
</a>