Question

我在laravel php中创建菜单侧栏，所以我想在所有子url上动态应用一些css 即

假设有一些网址

电子产品/电视/松下/ xxmodeltv
电子/电脑/笔记本电脑/ hp / hp 15-r001ne
电子/ XYZ / XYX / SD
电子设备/移动站/机器人/诺基亚/ nokia5

所以我想在电子/ *链接的所有子类别上应用一些css，所以告诉我如何忽略所有子网址的电子产品。

我有侧边栏菜单

我正在使用if条件或“||”对于每个子网址

<?php  $url = Request::path(); ?>

@if($url == 'electronic' || $url == 'electronics/mobiles' || $url == 'electronics/computers' || $url == 'electronics/tv) 
 class="active"
@endif

我想缩短这个复杂的代码

<div class="list-group" >
         <a  class="list-group-item active" style="border-radius: 0px; color: #0e0d0d;">
           {{ Auth::user()->name }}
         </a>

         <a href="{{ url('admin/') }}" class="list-group-item" <?php if ($url == 'admin') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>>
            <i class="fa fa-tachometer" aria-hidden="true"></i> 
            Dashboard
         </a>
         <a href="{{ url('admin/profile') }}" class="list-group-item" <?php if ($url == 'admin/profile' || $url == 'admin/profile/user' || $url == 'admin/profile/view' || $url == 'admin/profile/create') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-user" aria-hidden="true"></i> profile</a>
         <a href="{{ url('admin/file_manager') }}" class="list-group-item" <?php if ($url == 'admin/file_manager') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-file" aria-hidden="true"></i> File Manager</a>
         <a href="{{ url('admin/enquries') }}" class="list-group-item" <?php if ($url == 'admin/enquries') { echo ' style="background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-comments" aria-hidden="true"></i> Enquiries</a>

         <a href="{{ url('admin/tourpack') }}" class="list-group-item" <?php if ($url == 'admin/tourpack' || $url == 'admin/tourpack/create' || $url == 'admin/tourpack/edit' || $url == admin/tourpack/view' ) { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-cube" aria-hidden="true"></i> Tour Packages</a>

         <a href="{{ url('admin/travel_guide') }}" class="list-group-item" <?php if ($url == 'admin/travel_guide' || $url == 'admin/travel_guide/create'|| $url == 'admin/travel_guide/view'|| $url == 'admin/travel_guide/edit') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>>Tour Guidlines</a>

         <a href="{{ url('admin/transport') }}" class="list-group-item" <?php if ($url == 'admin/transport' || $url == 'admin/transport/create'$url == 'admin/transport/view'$url == 'admin/transport/edit') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-car" aria-hidden="true"></i> Transport's</a>

         <a href="{{ url('admin/states') }}" class="list-group-item" <?php if ($url == 'admin/states') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>>States</a>
         <a href="{{ url('admin/countries') }}" class="list-group-item" <?php if ($url == 'admin/countries') { echo ' style="    background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>>Countries</a>

         <a href="{{ url('admin/settings') }}" class="list-group-item" <?php if ($url == 'admin/settings' || $url == 'admin/settings/contacts') { echo ' style="background-color: #f7f7f7; border-left: 6px orange solid;"'; } ?>><i class="fa fa-cogs" aria-hidden="true"></i>
            Settings</a>

        </div>

Answer 1

这里是现成的代码，希望你会发现它有用

  $(function () {
    var textToBeFind = 'electronics';
    $(".list-group a").each(function () {
      var href = $(this).attr('href');
      (href.indexOf(textToBeFind) != -1)?  $(this).addClass('someClass'):'';
    });
  });

a {
    display: block;
  }
  .someClass{
    color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group">
  <a href="electronics/tv/panasonic/xxmodeltv">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="electronics/mobiles/android/nokia/123">link</a>
  <a href="bikes/#">link</a>
  <a href="mobiles/#">link</a>
  <a href="others/#">link</a>
</div>

Answer 2

你可以在普通的CSS中做到这一点，它正是CSS应该完成的。

在您的视图中（控制器会更好，保持代码不在视图中）

<?php $section = request()->segment(2); // 'profile', 'settings', etc ?>

在您看来：

<!-- Add your new section identifier here -->
<div class="list-group {{ $section }}">
    ...
    <!-- Remove inline CSS -->
    <a href="{{ url('admin/') }}" class="list-group-item"><i class="fa fa-tachometer" aria-hidden="true"></i>  Dashboard</a>
    <a href="{{ url('admin/profile') }}" class="list-group-item" ><i class="fa fa-user" aria-hidden="true"></i> profile</a>
    <a href="{{ url('admin/file_manager') }}" class="list-group-item"><i class="fa fa-file" aria-hidden="true"></i> File Manager</a>
    ...
</div>

在CSS文件中：

/* This applies to everything, unless overridden */
.list-group .list-group-item {
    background-color: #f7f7f7;
    border-left: 6px orange solid;
}

/* Now you can override just the cases you want, eg different style for profiles */
.list-group.profile .list-group-item {
    background-color: #000000;
    border-left: 6px white solid;
    color: white;
}

/* Another different style for some other site section */
.list-group.file_manager .list-group-item {
    background-color: #white;
    border-left: 6px black solid;
    color: black;
}

如何动态地在所有子路由上应用css属性？

2 个答案: