jQuery 用于选项卡的功能不起作用

jquery for the functionality of tabs not working

本文关键字：功能 不起作用 用于 选项 jQuery      更新时间：2023-09-26

我的网站上有 3 个标签

tab 1| tab 2 | tab 3

我正在使用jQuery来实现这些选项卡的功能，但是它不起作用，当我单击任何其他选项卡时，该页面仅显示选项卡1的详细信息，它没有加载

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( ".tabs" ).tabs();
  });
  </script>
<div class="tabs" ">
        <ul>
            <li data-tab="tab 1" class="active" ga-action="tab 1 Tab" ga-label="">tab 1</li>
            <li data-tab="tab 2" class="" ga-action="tab 2 Tab" ga-label="">tab 2</li>
            <li data-tab='tab 3' class=''>tab 3</li>
        </ul>
        <div id="tab 1" class="tab active">
        <p> Written Material one </p>                               
        </div>
        <div id="tab 2" class="tab">
        <p> Written Material two </p>   
        </div>
        <div id="tab 3" class="tab">
        <p> Written Material three </p> 
        </div>
    </div>

谁能告诉我如何使选项卡工作

您发布的代码中存在多个错误：

  • 顶级div中有一个孤立的双引号"。这是无效的 HTML
  • 您的<li>不包含任何按钮/链接。tabs小部件希望在li中有一个<a>元素，使用该元素将用户带到相应的选项卡
  • 您的内容div 的id属性包含空格。这是无效的 HTML。

要修复这些更改，请执行以下操作：

<div class="tabs">
...
<li data-tab="tab-1" class="active" ga-action="tab 1 Tab" ga-label="">
     <a href="#tab-1">tab 1</a>
</li>
...
<div id="tab-1" class="tab active">
...

下面是一个工作的小提琴示例： http://jsfiddle.net/9uvmktb8/

这就是所有明显的问题，如果它仍然不起作用，我会在省略的代码中寻找问题。让我知道这是否不是想要的功能（因为问题有点不清楚）

目前，您没有告诉您的li元素在单击时要去哪里。您可以尝试以下代码

<div class="tabs">
    <ul>
        <li class="active"><a href="#tabs-1">tab 1</a></li>
        <li class=""><a href="#tabs-2">tab 2</a></li>
        <li class=''><a href="#tabs-3">tab 3</a></li>
    </ul>
    <div id="tabs-1" class="tab active">
    <p> Written Material one </p>                               
    </div>
    <div id="tabs-2" class="tab">
    <p> Written Material two </p>   
    </div>
    <div id="tabs-3" class="tab">
    <p> Written Material three </p> 
    </div>
</div>

在上面的代码中，借助a链接，我们可以在单击要显示的选项卡时判断出来。

相关文章：