Question

我已将代码中的代码复制到atom并保存。我想我已经正确添加了jquery脚本并链接了样式表，但是当我从本地打开时，我的页面仍然显示不同。

Codepen - http://codepen.io/jordan_miguel/pen/gLwJRb

浏览器视图

这是我的控制台错误

文件夹结构

HTML

    body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1em;
    font-weight: 450;
    color: #a6a6a6;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: 0.13em;
    margin: 0 5px;
    }


   a {
   text-decoration: none !important;
   }

   #main {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
   -ms-flex-direction: column;
      flex-direction: column;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
      justify-content: center;
    width: 70%;
    max-width: 1260px;
    margin: 0 auto;
      }

    .nav {
    display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-flow: row wrap;
   -ms-flex-flow: row wrap;
      flex-flow: row wrap;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
      justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
     padding: 10px 20px;
    margin-top: 40px;
    }

   .nav-item {
    position: relative;
    padding: 0 20px;
    margin: 0 5px;
    font-size: 1em;
    font-weight: 450;
     color: #a6a6a6;
    text-decoration: none;
    line-height: 1.5;
    }

   .nav-item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
   height: 2px;
   background: #595959;
   -webkit-transition: all 500ms;
   transition: all 500ms;
   }
   .nav-item.active {
    color: black;
   -webkit-transition: all 350ms;
    transition: all 350ms;
    }

   .portfolio {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 6;
    list-style: none;
    }

  .project {
   position: relative;
   flex: 1 0 calc(100% - 20px);
   margin: 10px;

    &:hover {
    .project-info {
    }
    }

    @media (min-width: 520px) {
    flex: 0 0 calc((100% / 2) - 20px);
    }

@media (min-width: 860px) {
    flex: 0 0 calc((100% / 3) - 20px);
}
}

 .project-image img {
  display: block;
  width: 100%;
  height: auto;
 padding: 30px;
 }


  p {
 /* position the text */
  position: absolute;
  display: none;
  left: 30px;
  width: 100%;
  text-align: center;
  top: 40%;
  }
  img:hover + p {
  display: block;
  }

Css

     $(document).ready(function(){
$('.nav-item').click(function(){
    // reset active class
    $('.nav-item').removeClass("active");
    // add active class to selected
    $(this).addClass("active");
    // return needed to make function work
    return false;
});


$(function() {
    // create an empty variable
    var selectedClass = "";
    // call function when item is clicked
    $(".nav-item").click(function(){
        // assigns class to selected item
        selectedClass = $(this).attr("data-rel");
        // fades out all portfolio items
        $(".portfolio li").fadeOut(300);
        // fades in selected category
        $(".portfolio li." + selectedClass).delay(300).fadeIn(300);
    });
});

}); // document ready

JS

{{1}}

Answer 1

右下角有一个导出按钮。单击此按钮下载样本。

为什么我的codepen代码不起作用？

1 个答案: