Семантическая интеграция с Laravel 5.7 - PullRequest
Новая
       7

Семантическая интеграция с Laravel 5.7

0 голосов
/ 11 февраля 2019

Semantic-ui интегрирован с моим приложением laravel.Все кнопки работают, но Menubar не работает, т.е. любой код, который я скопировал из документации, показывает только это.

Я связал эти файлы - 

    <link rel="stylesheet" type="text/css" href="{{asset('semantic/dist/semantic.min.css')}}">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="{{asset('semantic/dist/semantic.min.js')}}"></script>

    <div class="ui secondary  menu"> 
       <a class="active item"> Home </a>
       <a class="item"> Messages </a>
       <a class="item"> Friends </a>
    <div class="right menu">
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
      </div>
      <a class="ui item"> Logout </a>
    </div>

По умолчанию Дом активен, но когда я щелкаю или фокусируюсь на другом элементе, например сообщениях или Друзьях, он не отображается как активный, иначе эффект зависанияработает нормально.

1 Ответ

0 голосов
/ 11 февраля 2019

Как видите, только первый пункт меню помечен как active в вашем коде, так почему вы ожидаете, что любые другие пункты меню будут помечены как active при нажатии на них? 

<a class="active item"> Home </a>

Вы должны определить, какой пункт меню активен, когда вы визуализируете меню и установите класс active на необходимый элемент.

Так, например, когда вы находитесь на «Домашней» странице, ваше меню должно выглядетьнапример: 

   <a class="active item"> Home </a>
   <a class="item"> Messages </a>
   <a class="item"> Friends </a>

Но когда вы находитесь на странице "Друзья", ваше меню должно выглядеть следующим образом: 

   <a class="item"> Home </a>
   <a class="item"> Messages </a>
   <a class="active item"> Friends </a>

И все остальное зависит от вашей реализации (либо это PHPили другой серверный язык, если вы генерируете свое меню, или JavaScript, если вы переключаете его состояние в браузере).

...