Question

我正在使用Foundation 6.我有一个选择，当你选择一些它加载它右侧的信息。一切都按预期加载。问题是标签没有切换。一切都正确加载，但它没有标签。这是一个例子。

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}

php页面 -

<div>content</div>
<div>content</div>

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel4" aria-selected="true">Info</a></li>
  <li class="tabs-title"><a href="#panel1">2013</a></li>
  <li class="tabs-title"><a href="#panel2">2014</a></li>
  <li class="tabs-title"><a href="#panel3">2015</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
 <div class="tabs-panel" id="panel1">
   STUFF
 </div>
 <div class="tabs-panel" id="panel2">
   STUFF
 </div>
 <div class="tabs-panel" id="panel3">
   STUFF
 </div>
 <div class="tabs-panel is-active" id="panel4">
   STUFF
 </div>
</div>

主页 -

<div class="large-10 columns" id="txtHint">
</div>

即使正确加载了ID，它们似乎也无法加载。

Answer 1

看起来@Yass在评论中很大程度上回答了这个问题，所以我会解决一些你可能会遇到麻烦的方法。

当您在ZURB Foundation中使用JS组件（在Docs中使用JS注释）并且您没有看到正确的行为时，这里有一些很好的方法可以进行故障排除。

1）添加ZURB Foundation Docs中的样板示例，该示例与您尝试执行的操作最相似。在这种情况下，其中一个标签示例。

有用吗？如果是这样，那么错误很可能出现在你的html结构中。缺少标签，缺少属性，拼写错误的标签或属性，非封闭标签，非封闭式引号，通常的嫌疑人。

如果没有......

2）检查是否jQuery is running。

一旦跑......

3）检查您是否可以实例化ZURB Foundation。在JS控制台中键入以下内容。

$(document).foundation();

您的JS组件是否正常工作？如果是这样，那么您需要确保实例化ZF。这通常在默认项目中链接的app.js或application.js文件中完成。在加载jQuery和ZURB Foundation（按此顺序）后，您也可以使用脚本标记执行此操作。

如果没有，那么您可能还没有加载正确的ZURB Foundation JavaScript文件。

基础选项卡/内容加载Jquery

1 个答案: