Laravel布局保持不同背景的導航鏈接

我正在制作儀表板。它具有包含在所有儀表板頁面中的布局，并包含鏈接。我需要指定具有不同背景的活動頁面鏈接。

我撰寫了下面的代碼來執行此操作，但是當我單擊鏈接時，它會重新加載頁面以轉到請求的頁面并重繪 布局并且一切都恢復為默認值。

處理這個問題的最簡單方法是什么？

$(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')

uj5u.com熱心網友回復：

您可以使用Route faces 來檢查活動路線。它將檢查活動路由是否相同，并回傳 true 或 false，我們可以使用它來創建三元條件。

<a href="#" class="a-reset">
    <a href="{{ route('dashboard.newcairo.interests') }}" hljs-string">">
        <div hljs-string">'dashboard.newcairo.interests') ? 'active' : 'sidebar-link'}} py-2">
            <i hljs-number">2"></i>
            <h6 hljs-string">">iCity New Cairo</h6>
        </div>
    </a>
</a>

標籤：javascript php jQuery 拉拉维尔

上一篇：如何驗證陣列？（拉拉維爾）

下一篇：number-X-number的正則運算式，例如“100x100”、“350X200”等