我试图隐藏一个.sidebar-item在一个特定的链接。我使用Laravel和Bootstrap。我可以这样用CSS隐藏它:
.sidebar-item
.sidebar-item { display: none;
字符串}但这隐藏它无处不在,我只希望它隐藏在一个特定的网址。如何使用CSS/JS隐藏它?
r7xajy2e1#
有几种方法可以使用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/(以下转载自上述博文)
body
第一种方法:
从刀片模板传递一个相关变量:
{{-- /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')
型在master中:
<body class="@yield('pageClass')">
型假设你添加了'my-custom-page'类到你想要隐藏.sidebar-item的页面的body标签中。然后你可以修改你的CSS如下:
.my-custom-page .sidebar-item { display: none; }
mnemlml82#
基于当前页面url分配CSS属性的部分解决方案可能是使用CSS :target pseudo selector。
2条答案
按热度按时间r7xajy2e1#
有几种方法可以使用CSS和JavaScript来实现这一点。一个简单的方法是检查页面的URL:
jQuery:
字符串
没有jQuery:
型
或者,你可以为Laravel中的每个页面添加一个自定义类到
body
标签。这将允许你使用CSS自定义特定的页面。我不是Laravel开发人员,但你可以在这里看到两个例子:http://dev-notes.eu/2016/10/add-body-class-on-laravel-views/(以下转载自上述博文)
第一种方法:
从刀片模板传递一个相关变量:
型
然后在/views/layouts/master.blade.php中:
型
第二种方法:
在子刀片模板中:
型
在master中:
型
假设你添加了'my-custom-page'类到你想要隐藏.sidebar-item的页面的
body
标签中。然后你可以修改你的CSS如下:型
mnemlml82#
基于当前页面url分配CSS属性的部分解决方案可能是使用CSS :target pseudo selector。