Question

我确实遇到了由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>

Answer 1

你可以轻松地测试并查看Jquery是否正常工作，只需简单地制作一个$并在google-chrome-console（或firebug）中输入并且该部分正常工作。我从http://www.sunsean.com/idTabs/下载了jquery-tabs，并在scripts / jquery.idTabs.js中包含了它（非min文件）

并使用以下代码：¨

<!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>

从我所看到你写的是：$（“＃ordinary1 ul”）。idTabs（）;但你不需要它，你需要的是将id =“idTabs”放在你有标签的ul元素上。然后就像你一样，用＃tab1命名你的标签（li元素），然后在文本中使用同名的id。

所以1确保jquery在控制台中使用$（或者看到失败的错误）。 2删除脚本标记内的代码。 3将class =“idTabs”放在ul元素中。 4，玩得开心。

编辑：应该是ul（或之前的div）上的class =“idTabs”。你也可能想要通过style =“display：none”来隐藏你的div，它们会在出现时弹出。

Answer 2

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

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

 });

您的代码没有调用函数。

Answer 3

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

有一种解决方法，check it out here - 基本上它解决了兼容性问题。

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

此外，您可以使用此JavaScript来为您的idTabs设置动画：

        <script type="text/javascript"> 
          jQuery("#usual1 ul").idTabs(function(id){  
            jQuery(id).fadeIn(500); 
          }); 
        </script>

idTabs不起作用

3 个答案: