HTML在推荐部分发布

HTML issues on a testimonial section

本文关键字：荐部 HTML      更新时间：2023-09-26

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

理想概念

我希望只使用html和css，但遗憾的是，我在逻辑上遇到了一些问题。环顾四周，我偶然发现了地基。我觉得这真的很有帮助，所以我用foundation重写了我的代码，并决定使用制表符功能。

我使用

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

但使用它，我得到的只是这第一个blockquote和两个选项卡，如果我点击Tab2，它将不会显示第二个blockquote。这绝对不会有任何作用。点击Tab1会将页面推到Blockquote 1的顶部。

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

您的javascript语法有问题。

它应该看起来像这个

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

不像这个

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

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

您需要在内容之后移动$(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>
相关文章：