网站上的选项卡 html 有问题

Question

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

我猜这与 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>

Answer 1

那里发生了很多事情。

乍一看，您没有使用 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>

Answer 2

您可以通过单击 Codepen 环境中的 settings 来检查正在使用哪些外部资源（如 JQuery 或 Bootstrap）。此特定脚本使用 JQuery，可以使用在线托管版本 (CDN) 或手动下载它，使用 <script> 标签将其导入到您的 <head> 中。

您现在可以使用它：

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

Answer 3

您可以使用此代码创建简单的标签页

(function() {
    'use strict';
    
    var tabMenus,
            tabContents;
    tabMenus = document.querySelectorAll('.tab_menu_item_link');
    tabContents = document.querySelectorAll('.tab_content');
    
    for (var i = 0; i < tabMenus.length; i++) {
        tabMenus[i].addEventListener('click', function(e) {
            e.preventDefault();
            
            for (var i = 0; i < tabMenus.length; i++) {
                tabMenus[i].className = 'tab_menu_item_link';
            }
            this.className = 'tab_menu_item_link is-active';
            
            for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].className = 'tab_content';
            }
            document.getElementById(this.dataset.id).className = 'tab_content is-active';

        });
    }
}());

body {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
ul , li {
    padding : 0;
    margin: 0;
    list-style: none
}
a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: bottom;
}

.clearfix {
  display: table;
  clear: both;
}

.container {
  width: 400px;
  margin: 0 auto;
  padding: 50px 0;
  background: #fff;
}

.tab_menu {
  width: 100%;
}
.tab_menu_item {
  float: left;
  margin-right: 2px;
  text-align: center;
}
.tab_menu_item:last-child {
  margin-right: 0;
}
.tab_menu_item_link {
  display: block;
  width: 100px;
  padding: 10px;
  background: #fff;
  border-radius: 5px 5px 0 0;
  border: 1px solid #888;
  border-bottom: none;
  box-sizing: border-box;
  color: #888;
  transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
  background: #888;
  color: #fff;
}

.tab_container {
  border: 1px solid #888;
}

.tab_content {
  padding: 20px;
  display: none;
}
.tab_content.is-active {
  display: block;
  -webkit-animation: fade 0.5s ease;
          animation: fade 0.5s ease;
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

 <div class="container">
    <div class="tab">
                    <ul class="tab_menu clearfix">
                        <li class="tab_menu_item"><a href="#" data-id="about" class="tab_menu_item_link is-active">About</a></li>
                        <li class="tab_menu_item"><a href="#" data-id="works" class="tab_menu_item_link">Works</a></li>
                        <li class="tab_menu_item"><a href="#" data-id="contact" class="tab_menu_item_link">Contact</a></li>
                    </ul>
                    <div class="tab_container">
                        <div class="tab_content is-active" id="about">
                            <p>some content about ...</p>
                        </div>
                        <div class="tab_content" id="works">
                            <p>some content works ...</p>
                        </div>
                        <div class="tab_content" id="contact">
                            <p>some content contact ...</p>
                        </div>
                    </div>
                </div>
    </div>

你可以在我的代码笔中看到这个示例： codepen.io

网站上的选项卡 html 有问题

Having trouble with html for tabs on website

html

javascript

css

tabs

web

改进：