laravel 使用 css 或 js 在特定 url 上隐藏 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43705970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 15:53:12  来源:igfitidea点击:

Hide div on specific url with css or js

javascripthtmlcsslaravel

提问by Lucian Barligea

I'm trying to hide a .sidebar-itemon a specific link. I am using Laravel & Bootstrap.

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

I can hide it with CSS like so:

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

.sidebar-item {
display: none;

}

}

But that hides it everywhere and I only want it hidden on a specific url.

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

How can I hide it with CSS/JS?

如何使用 CSS/JS 隐藏它?

回答by NRaf

There are a few ways you can achieve this using CSS and JavaScript. A simple way would be to check the URL of the page:

有几种方法可以使用 CSS 和 JavaScript 来实现这一点。一种简单的方法是检查页面的 URL:

With jQuery:

使用 jQuery:

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

Without jQuery:

没有 jQuery:

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

Alternatively, you could add a custom class to the bodytag for each page in Laravel. This will allow you to customize specific pages using CSS. I'm not a Laravel developer, but you can see two examples here: http://dev-notes.eu/2016/10/add-body-class-on-laravel-views/

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

(following is reproduced from the above blog post)

(以下内容转载自上述博文)

First method:

第一种方法:

Pass a relevant variable from the blade template:

从刀片模板传递一个相关变量:

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

Then in /views/layouts/master.blade.php:

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

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

Second method:

第二种方法:

In the child blade template:

在子刀片模板中:

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

In the master:

在主人:

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

Let's say you added the 'my-custom-page' class to the bodytag of the page you want .sidebar-item to be hidden on. You can then modify your CSS to the following:

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

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

回答by Andrea Carraro

A partial solution for assigning CSS properties based on current page url might be using CSS :target pseudo selector.

根据当前页面 url 分配 CSS 属性的部分解决方案可能是使用CSS :target 伪选择器