Question

我想在我的网站上创建一个推荐部分，看起来像这样

我希望只使用html和css，但遗憾的是我在逻辑方面遇到了一些麻烦。环顾四周时，我偶然发现了基础。感觉它真的会有所帮助，所以我用基础重写了我的代码并决定使用标签功能。

我用过

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Testimonials | Page</title>
<link rel="stylesheet" href="../css/foundation.min.css">
<link rel="stylesheet" href="../css/additional.css">
<script src="../js/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</head>

<div class="row">
<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="column large-8 large-offset-2 end testimonialBox">
        <blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote>
        <blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote>         
    </div>
</div>
<ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
    <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>

但是使用它，我得到的只是 this 第一个blockquote和2个标签，如果我点击Tab2，它将不会显示第二个blockquote。它什么都不会做。在Tab1上进行操作会将页面抖动到Blockquote 1的顶部。

知道如何让它发挥作用吗？

Answer 1

您的javascript语法有问题。

看起来应该是这样的

<script type="text/javascript">
    $(document).foundation();
</script>

而不喜欢这个

<script type="text/javascript">
<script>
    $(document).foundation();
</script>

Answer 2

您看到了奇怪的行为，因为初始化调用是在您的内容呈现之前发生的。

您需要在内容之后移动$(document).foundation()（适当地位于body的底部），以便正确初始化标签。

此外，我不知道这是否是复制错误，但您错过了结束div标记。您更新的html将是：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Testimonials | Page</title>
  <link rel="stylesheet" href="../css/foundation.min.css">
  <link rel="stylesheet" href="../css/additional.css">
  <script src="../js/jquery.js"></script>
  <script src="../js/foundation.min.js"></script>
</head>

<div class="row">
  <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="column large-8 large-offset-2 end testimonialBox">
      <blockquote class="tabs-panel is-active large-8 column medium-offset-2 text-center plusclass end" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cum autem corporis vero voluptatum molestias reiciendis, nostrum necessitatibus nesciunt, delectus repellat tempora sint, in architecto. Reprehenderit eveniet molestiae nesciunt
        dolor ipsam deleniti voluptatibus maxime sequi a ullam nihil, ex dicta soluta.<cite>Famous Guy 1</cite></blockquote>
      <blockquote class="tabs-panel large-8 column medium-offset-2 text-center plusclass end" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tempora tempore quaerat perferendis, ab a earum, neque quis odio amet error ipsum sint nihil unde similique illum. Facere iure magnam aliquam doloremque, hic velit omnis.<cite>Famous Guy 2</cite></blockquote>
    </div>
  </div>
  <ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
    <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  </ul>
</div>

<script type="text/javascript">
    $(document).foundation();
</script>

在推荐部分的HTML问题

2 个答案: