使用CSS或JS在特定的URL上隐藏div [英] Hide div on specific url with css or js
问题描述
我正在尝试在特定链接上隐藏.sidebar-item.我正在使用Laravel&引导程序.
I'm trying to hide a .sidebar-item on a specific link. I am using Laravel & Bootstrap.
我可以像这样用CSS隐藏它:
I can hide it with CSS like so:
.sidebar-item {
display: none;
}
但这会将它隐藏在所有地方，我只希望将其隐藏在特定的URL上.
But that hides it everywhere and I only want it hidden on a specific url.
如何用CSS/JS隐藏它?
How can I hide it with CSS/JS?
推荐答案
有几种方法可以使用CSS和JavaScript来实现.一种简单的方法是检查页面的URL:
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:
使用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/
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/
(以下摘自上述博客文章)
(following is reproduced from the above blog post)
第一种方法:
从刀片模板传递相关变量:
Pass a relevant variable from the blade template:
{{-- /views/articles/index.blade.php --}}
...
@extends('layouts.master', ['body_class' => 'articles index'])
...
然后在/views/layouts/master.blade.php中:
Then in /views/layouts/master.blade.php:
<body
@unless(empty($body_class))
class="{{$body_class}}"
@endunless
>
第二种方法:
在子刀片模板中:
In the child blade template:
@section('pageClass', 'js-home-page')
在母版中:
In the master:
<body class="@yield('pageClass')">
假设您将'my-custom-page'类添加到要隐藏.sidebar-item的页面的body标记中.然后，您可以将CSS修改为以下内容:
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 .sidebar-item {
display: none;
}
这篇关于使用CSS或JS在特定的URL上隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
