-4
私のcodepenのコードをatomにコピーして保存しました。私は正しくjqueryのスクリプトを追加し、スタイルシートをリンクしたと思うが、私のページは、私がローカルから開いたときにまだ異なって表示されます。codepenのコードが機能しないのはなぜですか？
Codepen - http://codepen.io/jordan_miguel/pen/gLwJRb
ブラウザビュー
これは私のコンソールエラーです
フォルダ構造
Htmlの
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main id="main">
<nav class="nav">
<a href="#" class="nav-item active" data-rel="project">Jordan Miguel</a>
<!-- when clicked will go to the option, so projects have to be the required option-->
<a href="#" class="nav-item" data-rel="option-2">Personal</a>
<a href="#" class="nav-item" data-rel="option-2">CV</a>
<a href="#" class="nav-item" data-rel="option-3">Contact</a>
</nav>
<ul class="portfolio">
<li class="project option-1">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />
<p>some text to display here</p>
</div>
<div class="project-info">
<h2 class="project-info-title">Cricket Journey</h2>
</a>
</div>
</li>
<li class="project option-2">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/2/" alt="Sports Image" />
</div>
<div class="project-info">
<h2 class="project-info-title">Swim</h2>
</a>
</div>
</li>
<li class="project option-3">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/3/" alt="Sports Image" /></div>
<div class="project-info">
<h2 class="project-info-title">Tour De Force</h2>
</div>
</a>
</li>
<li class="project option-2">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/10/" alt="Sports Image" /></div>
<div class="project-info">
<h2 class="project-info-title">Baseball Season</h2>
</div>
</a>
</li>
<li class="project option-3">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/5/" alt="Sports Image" /></div>
<div class="project-info">
<h2 class="project-info-title">BMX Arrives</h2>
</div>
</a>
</li>
<li class="project option-1">
<div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/6/" alt="Sports Image" /></div>
<div class="project-info">
<h2 class="project-info-title" href="#">World Cup 2016</h2>
</div>
</a>
</li>
のCss
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;
}
JS
$(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
コンソールエラーを確認してください。 – mmativ
ブラウザのコンソールを使用してエラーがないかどうかを確認してください。 –
どのように表示されますか？それは貧弱なスタイリングですか？コンテンツはすべてそれ自身の上に積み重ねられていますか？スクリーンショットを追加します。私たちは何を探しているのか分かりません。 –