Semantic-ui 表格菜单未按预期工作答案

【问题标题】：Semantic-ui Tabular Menu not working as expectedSemantic-ui 表格菜单未按预期工作
【发布时间】：2021-04-04 14:01:34
【问题描述】：

嘿，我正在尝试构建一个使用语义 UI 的 Electron 应用程序。目前，我正在尝试实现一个表格菜单，如基本选项卡示例所示，这是我尝试实现的行为：https://semantic-ui.com/modules/tab.html#basic-tabs。

我的代码似乎没问题，但菜单的行为与预期不符。在下图中，您可以看到 div 的内容只是出现在其他 div 的下方，作为普通的 div html 部分。

嗯，在我的研究中，我发现我们必须放一些类似的东西

<script>
  var $ = require('jquery');
  $('.item').click(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
});
</script>

我做到了，只是不知道是否正确。之后，更改按下按钮的功能起作用，即如果我按下“第二个”按钮，ui 渲染正确，如下图所示。等等其他可能的选项卡。

我已经做了以下步骤：

-> 通过 NPM 使用 npm install jquery --save 导入 jQuery，这在我的 package.json 文件中给了我 "jquery": "^3.5.1"。

我的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
</head>
<body>
    <div class="ui visible left demo vertical inverted thin sidebar labeled icon menu">
        
      <a class="item" href="index.html">
        <i class="tint icon"></i>
        Análise
      </a>
      <a class="item" href="resultados.html" style="color: aquamarine;">
        <i class="chart bar icon" style="color: aquamarine;"></i>
        Gráficos
      </a>
    </div>
    <div class="pusher">
      <div class="ui basic segment">
        <div style="width: 80%; margin: 2%;">     
            <div class="ui top attached tabular menu">
                <a class="item active" data-tab="hidrogenio">
                Níveis de hidrogenio
                </a>
                <a class="item" data-tab="etano">
                Photos
                </a>
                <a class="item" data-tab="etileno">
                    Etileno
                </a>
            </div>

            <div class="ui bottom attached segment" data-tab="hidrogenio">
              <p>First Tab</p>
            </div>

            <div class="ui bottom attached segment" data-tab="etano">
              <p>Second Tab</p>
            </div> 

            <div class="ui bottom attached segment" data-tab="etileno">
              <p>Third Tab</p>
            </div> 
        </div>
      </div>
    </div>
  <script>require('./js/renderer')</script>
</body>
<script>
  var $ = require('jquery');
  $('.item').click(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
});
</script>
</html>

我不知道为什么带有数据选项卡的 div 没有按预期工作并保持“隐藏”状态，直到我们按下相应的按钮...

非常感谢您的帮助！谢谢。

【问题讨论】：

标签： javascript html jquery electron semantic-ui

【解决方案1】：

查看您的代码并检查我在基础知识下方发布的文档后：

<!-- The basic format for a tabular menu -->
<div class="ui top attached tabular menu">
  <a class="active item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
  <a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
  Third
</div>

和JS代码：

// the require js code to make semantic read that html as a tabular menu
$('.menu .item')
  .tab()
;

我没有在您的代码中看到所需的 JS 部分，只有当您单击某个项目时您的脚本将运行的操作。您确实需要我发布的 JS 代码部分才能使其正常工作。

【讨论】：

感谢您的帮助！