Laravel에서 CSS 클래스 사용

실톱 075

이것이 제 첫 번째 질문이라 조금 긴장됩니다. Laravel을 배우고 5.6 버전을 사용하려고합니다. themeforest.net에서 HTML 테마를 얻고 마스터 레이아웃을 빌드합니다. 다른 blade.php 파일의 머리글 및 바닥 글 코드를 포함합니다. 헤더에는 '카테고리 찾아보기'라는 메뉴가 있습니다. 홈페이지의 메뉴에는 'show'라는 CSS 클래스가 포함되어 있습니다. 그러나 다른 페이지에는 메뉴가 없어야합니다. 내 header.blade.php 파일은 다음과 같습니다.

<div class="col-md-5 order-3 order-md-2">
    <nav class="category-nav primary-nav show"><!--this is where i stuck-->
        <div>
            <a href="javascript:void(0)" class="category-trigger">
                <i class="fa fa-bars"></i>Kategoriler
            </a>
            <ul class="category-menu">
                <li class="cat-item has-children">
                    <a href="#">Arts & Photography</a>
                    <ul class="sub-menu">
                        <li><a href="#">Bags & Cases</a></li>
                        <li><a href="#">Binoculars & Scopes</a></li>
                        <li><a href="#">Digital Cameras</a></li>
                        <li><a href="#">Film Photography</a></li>
                        <li><a href="#">Lighting & Studio</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

그리고 그 특정 수업이 여기 있습니다

.category-nav.show .category-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: visible;
}

홈 페이지를 제외하고 수동적 인 'show'클래스가 필요합니다. 어떻게 할 수 있습니까? 내 마스터 레이아웃이 여기 있습니다

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@yield('title', config('app.name'))</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Use Minified Plugins Version For Fast Page Load -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/plugins.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
</head>

<body>
<div class="site-wrapper" id="top">

    @include('includes.header')

    @yield('content')

</div>
<!--=================================
    Footer Area
===================================== -->

    @include('includes.footer')

<!-- Use Minified Plugins Version For Fast Page Load -->
<script src="js/plugins.js"></script>
<script src="js/ajax-mail.js"></script>
<script src="js/custom.js"></script>
</body>

</html>

유태인

명명 된 경로의 경우이 답변 에서 제안한대로 다음과 같이 할 수 있습니다 .

<a class="nav-link {{ Route::currentRouteNamed('home') ? 'active' : '' }}" href="#">
    Home
</a>

또는 명명 된 경로를 사용하지 않는 경우 현재 경로 작업을 확인하십시오.

<a class="nav-link {{ Route::currentRouteUses('App\Http\Controdllers\HomeController@index') ? 'active' : '' }}" href="#">
    Home
</a>

파일을 전혀 포함 할 수 없습니다.

@if(Route::currentRouteUses('App\Http\Controdllers\HomeController@index'))
    @include('includes.header')
@endif

또는

@if(Route::currentRouteNamed('home'))
    @include('includes.header')
@endif

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

@html에서 svelte css 클래스 사용

분류에서Dev

CSS-문장에서 여러 CSS 클래스 사용

분류에서Dev

다른 CSS 파일에서 CSS 클래스 사용

분류에서Dev

PHP 스크립트에서 CSS 클래스 사용

분류에서Dev

의사 클래스에서 CSS 무시

분류에서Dev

"사이"클래스 인스턴스에 대한 CSS 클래스

분류에서Dev

Reactjs에서 동적 CSS 클래스 이름 사용

분류에서Dev

angular 내부에서 CSS 클래스를 사용하는 방법

분류에서Dev

angular 내부에서 CSS 클래스를 사용하는 방법

분류에서Dev

CSS 클래스 이름에서 태그 사용

분류에서Dev

클래스에서만 CSS 속성을 사용하는 방법

분류에서Dev

LESS / CSS / Mixins 사용 및 클래스에서 값 전달

분류에서Dev

CSS에서 사용하지 않는 클래스 제거

분류에서Dev

일반 CSS에서 Slick.js 사용자 정의 의사 클래스 사용

분류에서Dev

웹 사이트에서 CSS 클래스를 사용하여 style.css 찾기

분류에서Dev

JQuery 자동 완성에서 사용자 정의 CSS 클래스 사용

분류에서Dev

여러 클래스에 CSS 적용

분류에서Dev

laravel Collective 5.2를 사용하여 양식에서 CSS 클래스를 구현하는 방법. *

분류에서Dev

: host CSS 의사 클래스에 심층 선택 적용

분류에서Dev

Vue.js : 자식 요소에 CSS 클래스 사용

분류에서Dev

유사 클래스 첫 번째 자식에 CSS3 적용

분류에서Dev

jQuery를 사용하여 호버에 CSS 클래스 추가

분류에서Dev

CKEditor에서 CSS 클래스를 사용하는 비 독점 스타일 규칙

분류에서Dev

CSS 클래스의 스타일을 사용하여 서식있는 텍스트를 클립 보드에 복사

분류에서Dev

객체에 CSS 클래스가있는 경우 여러 CSS 클래스 적용

분류에서Dev

CSS / LESS에서 동일한 클래스를 연속으로 여러 번 사용

분류에서Dev

Angular JS에서 ngClass를 사용하여 CSS 클래스 연결 및 제거

분류에서Dev

클래스에 sizeof 사용

분류에서Dev

클래스 이름에 공백이있는 CSS를 사용하여 클래스 변경

Related 관련 기사

  1. 1

    @html에서 svelte css 클래스 사용

  2. 2

    CSS-문장에서 여러 CSS 클래스 사용

  3. 3

    다른 CSS 파일에서 CSS 클래스 사용

  4. 4

    PHP 스크립트에서 CSS 클래스 사용

  5. 5

    의사 클래스에서 CSS 무시

  6. 6

    "사이"클래스 인스턴스에 대한 CSS 클래스

  7. 7

    Reactjs에서 동적 CSS 클래스 이름 사용

  8. 8

    angular 내부에서 CSS 클래스를 사용하는 방법

  9. 9

    angular 내부에서 CSS 클래스를 사용하는 방법

  10. 10

    CSS 클래스 이름에서 태그 사용

  11. 11

    클래스에서만 CSS 속성을 사용하는 방법

  12. 12

    LESS / CSS / Mixins 사용 및 클래스에서 값 전달

  13. 13

    CSS에서 사용하지 않는 클래스 제거

  14. 14

    일반 CSS에서 Slick.js 사용자 정의 의사 클래스 사용

  15. 15

    웹 사이트에서 CSS 클래스를 사용하여 style.css 찾기

  16. 16

    JQuery 자동 완성에서 사용자 정의 CSS 클래스 사용

  17. 17

    여러 클래스에 CSS 적용

  18. 18

    laravel Collective 5.2를 사용하여 양식에서 CSS 클래스를 구현하는 방법. *

  19. 19

    : host CSS 의사 클래스에 심층 선택 적용

  20. 20

    Vue.js : 자식 요소에 CSS 클래스 사용

  21. 21

    유사 클래스 첫 번째 자식에 CSS3 적용

  22. 22

    jQuery를 사용하여 호버에 CSS 클래스 추가

  23. 23

    CKEditor에서 CSS 클래스를 사용하는 비 독점 스타일 규칙

  24. 24

    CSS 클래스의 스타일을 사용하여 서식있는 텍스트를 클립 보드에 복사

  25. 25

    객체에 CSS 클래스가있는 경우 여러 CSS 클래스 적용

  26. 26

    CSS / LESS에서 동일한 클래스를 연속으로 여러 번 사용

  27. 27

    Angular JS에서 ngClass를 사용하여 CSS 클래스 연결 및 제거

  28. 28

    클래스에 sizeof 사용

  29. 29

    클래스 이름에 공백이있는 CSS를 사용하여 클래스 변경

뜨겁다태그

보관