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>不包含任何按钮/链接。 tabs窗口小部件希望<a>中包含li个元素，用户可以使用该元素到相应的标签
您的内容div的{{1}}属性包含空格。这是无效的HTML。

修复这些变化：

id

这是一个有用的小提琴示例：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链接的帮助下，我们可以告诉您点击要显示的标签。

jquery用于标签功能不起作用

2 个答案: