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
Hide div on specific url with css or js
提问by Lucian Barligea
I'm trying to hide a .sidebar-item
on 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 body
tag 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 body
tag 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 伪选择器。