所以我使用emmett缩写创建了这个html并编辑了一些id等，所有代码看起来都正确并匹配另一个模板但是这段代码不起作用。不起作用的部分是标签数据标签部分。基本上，无论您单击哪个选项卡，它都会在第一个＃p1a选项卡上保持静态。然而，第二个代码块按预期工作，它看起来基本相同，我无法弄清楚。
代码：
<dl class="accordion accorborder" data-accordion>
<dd class="accordion-navigation">
<a href="#p3"></a>
<div id="p3" class="content">
<div class="row">
<div class="small-6 columns">
<h6>code:</h6>
</div>
<div class="small-6 columns">
<h6>Course Materials:</h6>
<ul>
<li><a href="">Syllabus</a></li>
<li><a href="">Course Contract</a></li>
<li><a href="">White Board</a></li>
</ul>
</div>
</div>
<p></p>
<dl class="tabs" data-tab>
<dd class="active"><a href="#p3ax">Study Sheets</a></dd>
<dd><a href="#p3b">Study Sheets Answer Keys</a></dd>
<dd><a href="#p3c">Graded Assignments</a></dd>
<dd><a href="#p3d">Graded Assignment Answer Keys</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="p3a">
<ul class="ss">
<li><a href="">Study Sheet Unit 1</a></li>
<li><a href="">Study Sheet Unit 2</a></li>
<li><a href="">Study Sheet Unit 3</a></li>
<li><a href="">Study Sheet Unit 4</a></li>
<li><a href="">Study Sheet Unit 5</a></li>
</ul>
</div>
<div class="content" id="p3b">
<ul class="ss">
<li><a href="">Study Sheet Unit 1</a></li>
<li><a href="">Study Sheet Unit 2</a></li>
<li><a href="">Study Sheet Unit 3</a></li>
<li><a href="">Study Sheet Unit 4</a></li>
<li><a href="">Study Sheet Unit 5</a></li>
</ul>
</div>
<div class="content" id="p3c">
<ul class="ss">
<li><a href="">Study Sheet Unit 1</a></li>
<li><a href="">Study Sheet Unit 2</a></li>
<li><a href="">Study Sheet Unit 3</a></li>
<li><a href="">Study Sheet Unit 4</a></li>
<li><a href="">Study Sheet Unit 5</a></li>
</ul>
</div>
<div class="content" id="p3d">
<ul class="ss">
<li><a href="">Study Sheet Unit 1</a></li>
<li><a href="">Study Sheet Unit 2</a></li>
<li><a href="">Study Sheet Unit 3</a></li>
<li><a href="">Study Sheet Unit 4</a></li>
<li><a href="">Study Sheet Unit 5</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
虽然此代码可以：
<dl class="accordion accorborder" data-accordion>
<dd class="accordion-navigation">
<a href="#p1"><span class="alert label">PIE</span><span class="label">OFL</span><span class="success label">OFY</span>ENGLISH 9 Common Core Semester 1 </a>
<div id="p1" class="content">
<div class="row">
<div class="small-6 columns">
<h6>Code:</h6>HS-ES-113
<h6>Grade Level:</h6> 9
</div>
<div class="small-6 columns">
<h6>Course Materials:</h6>
<ul>
<li>
<a href="#">Syllabus</a>
</li>
<li>
<a href="#">Course Contract</a>
</li>
<li>
<a href="#">White Board</a>
</li>
</ul>
</div>
</div>
<p>English 9 provides an introduction to informational and literary genres and lays a foundation of critical reading and analytical
writing skills. Through texts that range from essays, speeches, articles and historical documents to a novel, a play, poetry
and short stories, students analyze the use of elements of literature and nonfiction. As they develop their writing skills and
respond to claims, students learn to formulate arguments and use textual evidence to support their position. To hone their
listening and speaking skills, students engage with a variety of media types through which they analyze and synthesize
information, discuss material, create presentations, and share their work.
</p>
<!-- Panels-->
<dl class="tabs" data-tab>
<dd class="active"><a href="#p1a">Study Sheets</a></dd>
<dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
<dd><a href="#p1c">Graded Assignments</a></dd>
<dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="p1a">
<ul class="ss">
<li><a href="#">Study Sheet Unit One</a></li>
<li><a href="#">Study Sheet Unit Two</a></li>
<li><a href="#">Study Sheet Unit Three</a></li>
<li><a href="#">Study Sheet Unit Four</a></li>
<li><a href="#">Study Sheet Unit Five</a></li>
</ul>
</div>
<div class="content" id="p1b">
<ul class="ssa">
<li><a href="#">Study Sheet w/ Answers Unit One</a></li>
<li><a href="#">Study Sheet w/ Answers Unit Two</a></li>
<li><a href="#">Study Sheet w/ Answers Unit Three</a></li>
<li><a href="#">Study Sheet w/ Answers Unit Four</a></li>
<li><a href="#">Study Sheet w/ Answers Unit Five</a></li>
</ul>
</div>
<div class="content" id="p1c">
<ul class="ga">
<li><a href="#">Graded Assignment Unit One</a></li>
<li><a href="#">Graded Assignment Unit Two</a></li>
<li><a href="#">Graded Assignment Unit Three</a></li>
<li><a href="#">Graded Assignment Unit Four</a></li>
<li><a href="#">Graded Assignment Unit Five</a></li>
</ul>
</div>
<div class="content" id="p1d">
<ul class="gaa">
<li><a href="#">Graded Assignment w/ Answers Unit One</a></li>
<li><a href="#">Graded Assignment w/ Answers Unit Two</a></li>
<li><a href="#">Graded Assignment w/ Answers Unit Three</a></li>
<li><a href="#">Graded Assignment w/ Answers Unit Four</a></li>
<li><a href="#">Graded Assignment w/ Answers Unit Five</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>