所以我试图制作一个导航栏,当你点击一个按钮/跨度时,会出现一个div,从顶部到导航栏正下方.但是,当我点击'荷马'时,首先没有任何反应,但第二次点击,然后它出现另一个效果,我没有在任何地方使用.[我不知道效果的名字,但div显示在它自己的左上角.]
这就是我想要的事情:
当我点击导航栏中的"荷马"时,一个div从身体到身体.div必须在导航栏下移动到0px,因此导航栏的底部和div(hidden-homer)的顶部之间没有空格.当我再次点击荷马时,div(hidden-homer)必须再次离开屏幕,因此向上移动.
在JSFiddle中,它根本不起作用......
那2个问题:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<span>Homer</span>
<span>Marge</span>
<span>Bart</span>
<span>Lisa</span>
<span>Maggie</span>
</div>
<div id="hidden-homer" class="hidden">
<h1>Homer</h1>
<p>Text</p>
</div>
<div id="hidden-marge" class="hidden">
<h1>Marge</h1>
<p>Text</p>
</div>
<div id="hidden-bart" class="hidden">
<h1>Bart</h1>
<p>Text</p>
</div>
<div id="hidden-lisa" class="hidden">
<h1>Lisa</h1>
<p>Text</p>
</div>
<div id="hidden-maggie" class="hidden">
<h1>Maggie</h1>
<p>Text</p>
</div>
<div id="intro">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">
</div>
jQuery的:
<script>
var main = …我正在关注Codecademy"制作互动网站"课程.我没有错误,但我对我不理解的东西有一个疑问:在幻灯片中使用if语句的东西.
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
};
这个if语句适用于最后一张幻灯片之后它将转到第一张幻灯片.为什么nextSlide.length === 0？
jQuery的:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
};
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
};
$(document).ready(main);
所以我的导航栏出了问题.我把它的宽度设置为100%.但我希望看到结束,因为它有圆角......
所以这样:| (=======)|
不像现在这样:| (========== |
#nav {
height: 60px;
font-size: 30px;
line-height: 60px;
vertical-align: middle;
text-align: center;
background-color: #0080FF;
width: 100%;
border: 10px solid #16044E;
border-radius: 20px;
z-index: 1;
}
#nav ul {} #nav li {
display: inline;
text-align: center;
margin: 20px;
}
#nav a {
color: white;
text-decoration: none;
}<ul id="nav">
<li><a href="">Home</a>
</li>
<li><a href="">Courses</a>
</li>
<li><a href="">Subjects</a>
</li>
<li><a href="">Sign Up</a>
</li>
<li><a href="">Log In</a>
</li>
</ul>