使用 css 或 js 隐藏特定 url 上的 div答案

【问题标题】：Hide div on specific url with css or js使用 css 或 js 隐藏特定 url 上的 div
【发布时间】：2017-09-28 02:14:15
【问题描述】：

我正在尝试在特定链接上隐藏 .sidebar-item。我正在使用 Laravel 和 Bootstrap。

我可以像这样用 CSS 隐藏它：

.sidebar-item {
display: none;

}

但这会将它隐藏在任何地方，我只希望它隐藏在特定的 url 上。

如何用 CSS/JS 隐藏它？

【问题讨论】：

您将无法仅使用 CSS 执行此操作，因为它不知道在哪里使用它。通常的解决方案是为该特定 URL 提供不同的 CSS 文件，或者使用一些 JavaScript 代码在从服务器加载内容后动态隐藏这些元素。
为什么不完全避免在该页面上输出项目。 @if(!Request::is('your/url') 在 Blade 模板中。

标签： javascript html css laravel

【解决方案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')">

假设您将“my-custom-page”类添加到您希望隐藏 .sidebar-item 的页面的 body 标记中。然后，您可以将 CSS 修改为以下内容：

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

【讨论】：

.hide()的jQuery函数不应用动画吗？
也许这不是 OP 想要做的。他仍然可以用js触发内联css的属性display:none。
我认为应该是if (window.location.href.indexOf('/my/url') >=0)。 indexOf 在找不到字符串时返回-1，所以当它只是if (window.location.href.indexOf('/my/url')) 时，if 循环仍然会触发。

【解决方案2】：

根据当前页面 url 分配 CSS 属性的部分解决方案可能是使用CSS :target pseudo selector。

【讨论】：