Question

Semantic-ui已与我的laravel应用集成。所有按钮都可以使用，但菜单栏不能使用，即我从文档中复制的任何代码都只显示那样。

我已经链接了这些文件-

    <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>

默认情况下，“主页”处于活动状态，但是当我单击或关注其他项目（即消息或“朋友”）时，它不会显示为处于活动状态，否则悬停效果会很好。

Answer 1

如您所见，在代码中只有第一个菜单项被标记为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>

其他一切都取决于您的实现（如果生成菜单，则是PHP或其他服务器端语言；如果在浏览器中切换其状态，则是JavaScript）。

与Laravel 5.7的语义UI集成

1 个答案: