Question

我正在使用Foundation 5框架并尝试使用他们提供的js tabs插件。

但是我得到以下结果http://crea8tion.com/PU2/index.html#

虽然在他们的网站上应该是这样的 http://foundation.zurb.com/docs/components/tabs.html

不确定我做错了什么？

是不是正确调用了java脚本？

Answer 1

同样的事发生在我身上。当您自定义基础构建时，就好像没有包含手风琴css。

我通过下载标准Foundation并将foundation.min.css的内容复制到我正在使用的文件夹中解决了这个问题。

Answer 2

这通常是因为缺少CSS规则，如果您是自定义构建，则会发生这种情况。例如，这是我的页面，其中包含自定义构建，其中我省略了标签。

problem

然后我从完整下载中复制了规则并在浏览器中对其进行了测试。您还可以查看这是否是您的问题。

.tabs {
  *zoom: 1;
  margin-bottom: 0 !important; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    float: left; }
    .tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 1rem;
      padding-right: 2rem;
      padding-bottom: 1.0625rem;
      padding-left: 2rem;
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 1rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: #fff; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.5rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.9375rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.9375rem; }

@media only screen and (min-width: 40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }

  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }
ul.pagination {
  display: block;
  height: 1.5rem;
  margin-left: -0.3125rem; }
  ul.pagination li {
    height: 1.5rem;
    color: #222222;
    font-size: 0.875rem;
    margin-left: 0.3125rem; }
    ul.pagination li a {
      display: block;
      padding: 0.0625rem 0.625rem 0.0625rem;
      color: #999999;
      -webkit-border-radius: 3px;
      border-radius: 3px; }
    ul.pagination li:hover a,
    ul.pagination li a:focus {
      background: #e6e6e6; }
    ul.pagination li.unavailable a {
      cursor: default;
      color: #999999; }
    ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus {
      background: transparent; }
    ul.pagination li.current a {
      background: #008cba;
      color: white;
      font-weight: bold;
      cursor: default; }
      ul.pagination li.current a:hover, ul.pagination li.current a:focus {
        background: #008cba; }
  ul.pagination li {
    float: left;
    display: block; }

粘贴代码进行测试

result

然后您可以继续手动添加代码或只替换基础css文件。

Answer 3

对我有用的是升级到5.3.3（JS和CSS文件）：

（目前使用5.4.0，也可以正常工作）。

Answer 4

第1课。 Zurb的自定义构建并不总是正确的。在那里烧过几次。正如Artur Barsheghyan建议的那样下载整个shebang解决了这个问题。根据您的定制，大约需要50kb左右。

建议的链接也适用于非最小化版本： http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
如果你想找到丢失的东西并将其插入自定义下载......

我强烈建议手动搜索和编辑。我丢失了手风琴比特，它们在非最小化文件的3056标记处只有30行。

Foundation 5 Tabs和Accordion似乎不起作用

4 个答案: