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中有一个孤立的双引号"。这是无效的超文本标记语言

• 您的<li>%s不包含任何按钮/链接。tabs小部件希望在li中有一个<a>元素，通过它可以将用户带到相应的选项卡

• 您的content 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/

这就是所有明显的问题，如果它仍然不能工作，我会在省略的代码中查找问题。如果这不是我想要的功能，请告诉我(因为这个问题有点不清楚)

Answer 2

当前，您没有告诉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链接的帮助下，我们可以告诉单击要显示的选项卡。