javascript - jquery 的选项卡功能不起作用

Question

我的网站上有 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>

谁能告诉我如何让标签工作

Answer 1

您发布的代码中有几个错误:

• 有一个孤立的双引号 "在顶层 div .这是无效的 HTML
• 你的 <li> s 不包含任何按钮/链接。 tabs小部件期望有一个 <a> li 中的元素, 将用户带到相应的选项卡
• 您的内容 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">
...

这是一个有效的 fiddle 示例:http://jsfiddle.net/9uvmktb8/

这就是所有明显的问题，如果它仍然无法正常工作，我会在省略的代码中寻找问题。让我知道这是否不是想要的功能(因为问题有点不清楚)