Foundation 5 Tabs和Accordion似乎不起作用

Question

我正在使用Foundation 5框架并尝试使用它们提供的js选项卡插件.

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

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

不确定我做错了什么？

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

Answer 1

同样的事情发生在我身上.当您自定义Foundation构建时,就好像没有包含手风琴css.

我通过下载标准Foundation并将foundation.min.css的内容复制到我正在使用的文件夹中来解决它.

Answer 2

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

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

.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; }

粘贴代码进行测试

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