Question

我正在尝试在特定链接上隐藏.sidebar-item。我正在使用Laravel＆amp;自举。

我可以用CSS隐藏它：

.sidebar-item {
display: none;

}

但是它隐藏在任何地方，我只想隐藏在特定网址上。

如何用CSS / JS隐藏它？

Answer 1

使用CSS和JavaScript可以通过几种方法实现这一目标。一种简单的方法是检查页面的URL：

使用jQuery：

document.ready(function() {
  if (window.location.href.indexOf('/my/url')) {
    //Hide the element.
    jQuery('.sidebar-item').hide();
  }
});

没有jQuery：

window.onload = function() {
  if (window.location.href.indexOf('/my/url')) {
    //Hide the element.
    document.querySelectorAll('.sidebar-item')[0].style.display = 'none';
  }
};

或者，您可以为Laravel中的每个页面的body标记添加自定义类。这将允许您使用CSS自定义特定页面。我不是Laravel开发人员，但您可以在此处看到两个示例：http://dev-notes.eu/2016/10/add-body-class-on-laravel-views/

（以下是从上述博客文章转载而来）

第一种方法：

从刀片模板传递相关变量：

{{-- /views/articles/index.blade.php --}}
...
@extends('layouts.master', ['body_class' => 'articles index'])
...

然后在/views/layouts/master.blade.php：

<body
  @unless(empty($body_class))
    class="{{$body_class}}"
  @endunless
  >

第二种方法：

在子刀片模板中：

@section('pageClass', 'js-home-page')

在主人：

<body class="@yield('pageClass')">

我们假设你添加了我的自定义页面＆＃39;将您要隐藏的.sidebar-item标记为您要隐藏的页面的body标记。然后，您可以将CSS修改为以下内容：

.my-custom-page .sidebar-item {
  display: none;
}

Answer 2

根据当前网页网址分配CSS属性的部分解决方案可能正在使用CSS :target pseudo selector。

使用css或js隐藏特定URL上的div

2 个答案: