时间戳

首页 > 解决方案 > 网站上标签的 html 有问题

javascript - 网站上标签的 html 有问题

问题描述

我是一个初学者，所以感谢这个耐心。我正在尝试在我的网站上嵌入一个非常简单的标签结构。我不确定为什么它不起作用。这是下面的代码。

我猜这与 JS 有关，但同样，我只是对此很陌生。任何帮助将不胜感激！谢谢！

（为此，我使用了 CodePen 上的代码）


<html lang="en" >
<head>

<script>$(function () {

  var activeIndex = $('.active-tab').index(),
      $contentlis = $('.tabs-content li'),
      $tabslis = $('.tabs li');
  
  // Show content of active tab on loads
  $contentlis.eq(activeIndex).show();

  $('.tabs').on('click', 'li', function (e) {
    var $current = $(e.currentTarget),
        index = $current.index();
    
    $tabslis.removeClass('active-tab');
    $current.addClass('active-tab');
    $contentlis.hide().eq(index).show();
   });
});</script>



  <meta charset="UTF-8">
  <title>CodePen - Simple tabs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
  margin: 20px;
  padding: 0;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: none;
  position: relative;
  color: black;
}
.tabs .active-tab:after {
  width: 100%;
  height: 2px;
  position: absolute;
  content: "";
  bottom: -0.1em;
  left: 0;
  background: white;
}
.tabs li {
  display: inline-block;
  cursor: pointer;
  color: #3a5ea7;
  padding: 5px 10px;
}
.tabs li:first-child {
  margin-left: 10px;
}

.tabs-content {
  margin: 20px;
  padding: 0;
  list-style: none;
}
.tabs-content li {
  display: none;
}</style>
</head>
<body>


<!-- partial:index.partial.html -->
<ul class="tabs">
  <li class="active-tab">First tab</li>
    <li>Second tab</li>
    <li>Third tab</li>
</ul>

<ul class="tabs-content">
    <li>Content of first tab</li>
  <li>Content of second tab</li>
  <li>Content of third tab</li>
</ul>
<!-- partial -->


  

</body>
</html>

标签： javascripthtmlcsswebtabs

解决方案

那里发生了很多事情。

乍一看，您没有使用 JavaScript，而是使用了一个名为 JQuery 的库，因此您需要“导入”它，否则该代码将无法工作。

它必须放在您的 JQuery 代码之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

我建议将您编写的代码放在页面底部，在结束正文标记之前

---> HERE
</body>

改进：

将您的代码分成“模块”或更小的块。

  • 样式标签内的所有内容，将其剪切并粘贴到一个新文件中，例如 style.css。
  • 脚本标签内的所有内容，剪切并粘贴到一个新文件中，例如 app.js。
  • 之后导入它们，JavaScript 文件，在结束 body 标记之前，如前所述，以及其他样式旁边的 css 导入。

所以，你最终会得到这样的东西：

页面顶部，head 标签内

...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

页面底部，关闭 body 标签之前

...
  <script src="./app.js"></script>
</body>

推荐阅读