javascript - 推荐部分的 HTML 问题

标签 javascript jquery html css zurb-foundation

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

Ideal concept

我希望只使用 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 的顶部。

知道如何让它工作吗?

最佳答案

您的 javascript 语法有问题。

应该是这样的

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

不是这样的

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

关于javascript - 推荐部分的 HTML 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36645734/

相关文章:

javascript - 我提取表格单元格内部文本的逻辑有什么问题?

javascript - 为什么 footable 的分页不起作用?

html - img 旁边的两个文本

javascript - 如何使用javascript获取文件选择事件中文件控件的文件名

javascript - jQuery DataTable 日期范围搜索

javascript - 路由嵌套数组后Vue js不渲染

php - &lt;textarea&gt;和MYSQL在php中显示数据

javascript - 为什么通过 props 正确传递的数组返回未定义?

php - jquery完整日历在ipad safari浏览器上不显示事件

jquery - Chrome 中无法解释的行为,是我的代码还是他们的代码?