1

我确实在 Sean Catchpole 启动 idTabs 时遇到问题，Chrome 正确加载模块，控制台上没有错误，但 jQuery 不起作用，链接只是将我带到 idTabs 未隐藏的文本 -所以我假设 javascript 或 jQuery 不起作用，但问题出在哪里？这是我的代码

头部部分：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.min.js"></script>

    <script type="text/javascript"> 
    $("#usual1 ul").idTabs(); 
    </script>

</head>

HTML：

    <div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div>
4

3 回答 3

2

您可以通过简单地制作 $ 并在 google-chrome-console（或 firebug）中按 Enter 来轻松测试并查看 Jquery 是否正常工作，并且该部分正在工作。我从http://www.sunsean.com/idTabs/下载了 jquery-tabs并将它（非最小文件）包含在 scripts/jquery.idTabs.js

并使用以下代码它可以工作：¨

<!DOCTYPE html>
<body>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.js"></script>


</head>
<body>
 <div class="usual"> 
  <ul class="idTabs" > 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
<div style="display:block;" id="tab1">This is tab 1.</div> 
<div style="display:none;" id="tab2">More content in tab 2.</div> 
<div style="display:none;" id="tab3">Tab 3 is always last!</div> 
</div> 
</body>
</html>

从我可以看到你在写： $("#usual1 ul").idTabs(); 但你不需要那个，你需要的是把 id="idTabs" 放在你有标签的 ul 元素上。然后像你一样，用#tab1 命名你的标签（li 元素），然后在文本中使用相同名称的id。

所以 1 确保 jquery 在控制台中使用 $ 工作（或看到无法获取的错误）。2 删除脚本标签内的代码。3 将class="idTabs" 放在ul 元素中。4、玩得开心。

编辑：应该是 ul 上的 class="idTabs" （或之前的 div）。此外，您可能希望通过 style="display:none" 隐藏您的 div，它们会在按下时弹出。

于 2012-07-18T12:00:28.993 回答
1

我认为你必须这样写你的jquery，

$(document).ready(function() {
   $("#usual1 ul").idTabs(); 

 });

您的代码没有调用函数。

于 2012-07-18T11:54:40.823 回答
0

idTabs 确实有 Ajax 的问题。如果您在同一页面上使用 idTabs 和 Ajax 代码，那么您可能会同时遇到这两个问题。例如，您不能使用 idTabs 和 Sphider-Plus ajax 自动完成功能，两者都不起作用。

有一个解决方法，在这里查看- 基本上它解决了兼容性问题。

如果我们要举例 idTabs 代码，它实际上写得很好，并且在 jQuery 命名空间内。当插件尝试检查依赖项然后加载自身并加载依赖项时，就会出现问题。无论如何，检查修复。

此外，您可以使用此 javascript 为您的 idTab 设置动画：

        <script type="text/javascript"> 
          jQuery("#usual1 ul").idTabs(function(id){  
            jQuery(id).fadeIn(500); 
          }); 
        </script>
于 2013-01-20T01:37:59.487 回答