Uncaught ReferenceError-Jekyll项目中的Javascript

我在这个项目中使用Jekyll。

以下目录结构对于标准的Jekyll项目是否正确
我在assets中创建了一个javascript文件夹。文件夹中有一个coffeescript文件
我需要@import/@将这个javascript文件包含在js所针对的index.html中吗

目录结构

/project
  /.sass-cache
  /_includes
  /_layouts
  /_posts
  /_sass
  /_site
  /about
  /assets
    /images
      picture.png
      nextpicture.jpeg
    /js
      welcome.coffee
  /build
  /buld
  /css
  /serve
  .gitignore
  _config.yml
  feed.xml
  index.html
  nextpage.html

index.html

这是以选项卡式ul列表为主要内容的主页内容
此选项卡式ul列表是一种称为手风琴选项卡最小值的波旁再填充模式

主页

---
layout: welcome
---
<div class="home">

 <h1>Title</h1>
 <ul class="accordion-tabs-minimal">
  <li class="tab-header-and-content">
    <a href="#" class="tab-link is-active">Tab Item</a>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Another Tab</a>
    <div class="tab-content">
      <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Third</a>
    <div class="tab-content">
      <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>    
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Last Item</a>
    <div class="tab-content">
      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna.</p>
    </div>
  </li>
</ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>
<script type="text/javascript" src="/assets/js/welcome.js"></script>

/assets/js/welcome.coffee

javascript用于欢迎页面，但会出现未定义的引用错误
我在chrome浏览器中使用了inspect元素来查看js 的问题

---
---
$(document).ready ->
  $(".accordion-tabs-minimal").each (index) ->
    $(this).children("li").first().children("a").addClass("is-active").next().addClass("is-open").show()
    return
  $(".accordion-tabs-minimal").on "click", "li > a", (event) ->
    unless $(this).hasClass("is-active")
      event.preventDefault()
      accordionTabs = $(this).closest(".accordion-tabs-minimal")
      accordionTabs.find(".is-open").removeClass("is-open").hide()
      $(this).next().toggleClass("is-open").toggle()
      accordionTabs.find(".is-active").removeClass "is-active"
      $(this).addClass "is-active"
    else
      event.preventDefault()
    return
  return

问题

因此，javascript没有正确地链接到html文件。这个未定义的引用错误是什么？

检查元件

Uncaught: ReferenceError: $ is not defined

目标

javascript控制点击波旁威士忌填充手风琴选项卡时段落文本的显示

目前，选项卡不显示任何信息，因为它们是display: none;，直到javascript调用.show()

$用于jquery

请记住在head.html 中包含以下内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

相关内容

最新更新

热门标签：