我想在我的网站上创建一个类似这样的推荐部分
我希望只使用 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/