Javascript 推荐部分的HTML问题_Javascript_Jquery_Html_Css_Zurb Foundation

Javascript 推荐部分的HTML问题

javascript jquery html css zurb-foundation

Javascript 推荐部分的HTML问题,javascript,jquery,html,css,zurb-foundation,Javascript,Jquery,Html,Css,Zurb Foundation,我想在我的网站上创建一个类似这样的推荐部分 <script type="text/javascript"> $(document).foundation(); </script> <script type="text/javascript"> <script> $(document).foundation(); </script> 我希望只使用html和css，但遗憾的是，我在逻辑上遇到了一些问题。环顾四周，我偶

我想在我的网站上创建一个类似这样的推荐部分

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

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

我希望只使用html和css，但遗憾的是，我在逻辑上遇到了一些问题。环顾四周，我偶然发现了基金会。感觉它真的很有用，所以我用基础重新编写了我的代码，决定使用标签功能。p> 我曾经

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


推荐书第页
$（document.foundation（）；
Lorem ipsum dolor sit amet，奉献精英。建筑设计中的智慧与身体之美，必要的灵丹妙药，暂时的排斥。这句话的意思是：一个著名的人物1.他是一个非常有名的人
Lorem ipsum dolor sit amet，奉献精英。在同一时间内，同一时间内，同一时间内的同一时间误差是相同的。Facere iure magnam aliquam doloremque，hic velit omnis.著名人物2

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

你知道怎么让它工作吗

您的javascript语法有问题

应该是这样的

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

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


$（document.foundation（）；

而不是像这样

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

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


$（document.foundation（）；

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

您需要在内容之后移动

$（document）.foundation（）

（适当地位于

正文的底部），以便正确初始化选项卡
另外，我不知道这是否是一个复制错误，但您缺少一个结束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>


推荐书第页
Lorem ipsum dolor sit amet，奉献精英。建筑设计中的智慧与身体之美，必要的灵丹妙药，暂时的排斥。埃文尼特·穆尔斯蒂·奈斯西翁律师事务所
dolor ipsam deleniti Volupatibus maxime sequi a ullam nihil，著名人物1
Lorem ipsum dolor sit amet，奉献精英。在同一时间内，同一时间内，同一时间内的同一时间误差是相同的。Facere iure magnam aliquam doloremque，hic velit omnis.著名人物2




$（document.foundation（）；
你能举个有效的例子吗？我会的。脚本标记问题来自我在编辑堆栈溢出时。