-2
我正在创建这个网站来测试一些JQuery的东西在这里和那里。我设法相处得很好，但现在我遇到了一个我无法理解的问题。按钮不能像他们应该
我有这个菜单，有3个按钮。这些按钮在页面的某些部分（联系人，项目，信息）之间交替显示，但是当第一次加载页面时，有些按钮不能正常工作，直到您点击正确的按钮，然后它们无法正常工作。我试图修复它，但现在“Proyectos”按钮甚至不起作用。
的script.js
var main = function(){
// Creating variables
var $navButton = $('#nav-button'),
$navMenu = $('#nav-menu'),
$navButtons = $('#nav-buttons'),
$logo = $('#logo'),
$contactPage = $('#contact-page'),
$infoPage = $('#info-page'),
$projectPage = $('#project-page'),
$butContact = $('#but-contacto'),
$butInfo = $('#but-info'),
$butProject = $('#but-projects'),
transitioning = false,
logoOnTop = false;
//Setting the page up
$projectPage.hide();
$navButtons.hide();
$contactPage.hide();
$infoPage.hide();
//Display-Hide menu
$navButton.click(function(){
var $this = $(this);
$this.data('clicked', !$this.data('clicked'));
if(!transitioning) {
transitioning = true;
if($navButton.data('clicked')) {
$navMenu.animate({left: '0'}, 500, function(){
transitioning = false;
});
$navButtons.show('slide',400);
} else {
$navMenu.animate({left: '-134'}, 500, function(){
transitioning = false;
});
$navButtons.hide('slide',400);
}
}
});
//Display contact page
$butContact.click(function(){
if (!logoOnTop) {
$logo.animate({top: '0px'},500);
logoOnTop = true;
}
$infoPage.hide();
$projectPage.hide();
$contactPage.delay(400).fadeIn('slow').delay(400);
});
//Display info page
$butInfo.click(function(){
if (!logoOnTop) {
$logo.animate({top: '0px'}, 500);
logoOnTop = true;
}
$projectPage.hide();
$contactPage.hide();
$infoPage.delay(400).fadeIn('slow').delay(400);
});
//Display projects page
$butProject.click(function(){
if (!logoOnTop) {
$logo.animate({top:'0px'}, 500);
logoOnTop = true;
}
$infoPage.hide();
$contactPage.hide();
$projectPage.delay(400).fadeIn('slow').delay(400);
});
}
$(document).ready(main);
的main.css
html{
position:relative;
height:100%;
width:100%;
background-color: #6E6E6E;
}
.nav-button{
position:absolute;
margin-top: -2px;
margin-left: 7px;
width: 32px;
height: auto;
z-index:1;
}
.nav-menu{
background-color:#424242;
position:absolute;
top:0px;
left:-134px;
width: 200px;
height:100%;
}
.nav-buttons{
position:absolute;
top:225px;
width:200px;
}
.nav-buttons h3{
background-color:#333;
height: 40px;
text-align:center;
padding-top:15px;
color: #000;
text-shadow: -1px 0px 0.2px #555, 1px 0px 0.2px #555, 0px 1px 0.2px #555, 0px -1px 0.2px #555;
}
.logo{
position: relative;
top:250px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 100%;
}
h3, h1, h5, h3{
width:100%;
text-align:center;
font-family: Sansita One;
color: #222;
text-shadow: 0px 2px 3px #555;
}
.logo h1{
margin-bottom: 3px;
}
.logo h3{
margin-top: 2px;
}
.hover-rotate:hover {
-ms-transform: rotate(-170deg);
-webkit-transform: rotate(-170deg);
-moz-transform: rotate(-170deg);
-o-transform: rotate(-170deg);
transform: rotate(-170deg);
}
.contact-page{
position: relative;
top:135px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 100%;
}
.info-page{
position: relative;
top:135px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 100%;
}
.project-page{
position: relative;
top:135px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 100%;
}
的index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src='js/jquery-2.1.4.min.js'></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<title>Manuel Pepe - Test</title>
</head>
<body>
<div id="nav-bar" class="nav-bar">
<div id="container">
<img id="nav-button" class="nav-button" src="imgs/menu.png" />
<div id="nav-menu" class="nav-menu">
<div id="nav-buttons" class="nav-buttons">
<div id="but-info" class="but-info"><h3>Informacion</h3></div>
<div id="but-projects" class="but-project s"><h3>Proyectos</h3></div>
<div id="but-contacto" class="but-contacto"><h3>Contacto</h3></div>
</div>
</div>
</div>
</div>
<div id="logo" class="logo">
<h1>Manuel Pepe</h1>
<h3>Test</h3>
<h5>¡¡¡ALPHA!!!</h4>
</div>
<div id="contact-page" class="contact-page">
<h1>Hablame!</h1>
<h3>WIP!</h3>
</div>
<div id="info-page" class="info-page">
<h1>Quien soy?</h1>
<h3>WIP!</h3>
</div>
<div id="project-page" class="project-page">
<h1>Algunos proyectos:</h1>
<h3>WIP!</h3>
</div>
</body>
</html>
你有这个运行的小提琴吗？ – rfornal
'
'...''？在问一个问题之前，您能否确保您下次获得有效的HTML，CSS和JavaScript（JSHint）？ – Xufox