Navbar Active Fade不起作用

Question

我想要链接来运行代码，但实际上并没有链接到任何地方，我希望div #gallery在点击function enter(){ document.getElementById('left').style.display = 'inline'; document.getElementById('right').style.display = 'inline'; fadeout(frontButton); } function fadeout(element) { var op = 1; var timer = setInterval(function () { if (op <= 0.05){ clearInterval(timer); element.style.display = 'none'; if(element == frontButton){ moveImg(); } if(element == right){ var x = document.getElementById('navbar'); x.style.display = 'block'; } } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 25); } function moveImg() { var l = document.getElementById('left'); var r = document.getElementById('right'); var a = document.getElementById('animation'); var c = document.getElementById('copyright'); var pos = 200; var op = 1; var id = setInterval(function() { if (pos == 80) { clearInterval(id); } else { pos--; op++; x = pos / 50; l.style.marginRight = x + '%'; r.style.marginLeft = x + '%'; if(pos >=20){ if(op <= 100){ p = op / 100; a.style.opacity = p; a.style.filter = 'alpha(opacity=' + p + ")"; } } if(op <= 100){ c.style.opacity = p; c.style.filter = 'alpha(opacity=' + p + ")"; } } }, 12); } function fadein(element){ var op = 0.1; var timer = setInterval(function () { if (op >= 1){ clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 60); } function pick(input){ fadeout(left); fadeout(right); fadein(navbar); } function click(element){ var a = document.getElementById('1a'); var b = document.getElementById('2a'); var c = document.getElementById('3a'); var d = document.getElementById('4a'); document.getElementById('test').style.display = 'block'; if(element == gallery){ if(b.style.opacity = 1){ fadeout(b); }else if(c.style.opacity = 1){ fadeout(c); }else if(d.style.opacity = 1){ fadeout(d); } fadein(left); }else if(element == news){ if(c.style.opacity = 1){ fadeout(c); }else if(d.style.opacity = 1){ fadeout(d); }else if(a.style.opacity = 1){ fadeout(a); } fadein(b); }else if(element == about){ if(d.style.opacity = 1){ fadeout(d); }else if(a.style.opacity = 1){ fadeout(a); }else if(b.style.opacity = 1){ fadeout(b); } fadein(c); }else if(element == inquire){ if(a.style.opacity = 1){ fadeout(a); }else if(b.style.opacity = 1){ fadeout(b); }else if(c.style.opacity = 1){ fadeout(c); } fadein(d); } }时显示，以便活动导航链接具有不同的背景。 我理解jquery或其他js库会让这更容易，但我现在试图更好地掌握javascript。 - 谢谢你的任何回复！ ：）

（如果使用代码段，请全屏显示以获得最佳体验）

＆＃13;

＆＃13;

body{
  background-image:url(http://imgur.com/Kp0OTTi.png);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font-family:Georgia;
  margin:0px;
  padding:0px;
}
h1{
  text-align:center;
}
#enter{
  width:139px;
  height:100px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
#enter a{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#frontButton{
  background:#bababa;
  background-image:-webkit-linear-gradient(top, #bababa, #424242);
  background-image:-moz-linear-gradient(top, #bababa, #424242);
  background-image:-ms-linear-gradient(top, #bababa, #424242);
  background-image:-o-linear-gradient(top, #bababa, #424242);
  background-image:linear-gradient(to bottom, #bababa, #424242);
  -webkit-border-radius:28;
  -moz-border-radius:28;
  border-radius:28px;
  text-shadow:4px 2px 6px #000000;
  font-family:Georgia;
  color:#ffffff;
  font-size:40px;
  padding: 10px 20px 10px 20px;
  text-decoration:none;
  cursor:pointer;
}
#frontButton:hover{
  background:#e0e0e0;
  background-image:-webkit-linear-gradient(top, #e0e0e0, #424242);
  background-image:-moz-linear-gradient(top, #e0e0e0, #424242);
  background-image:-ms-linear-gradient(top, #e0e0e0, #424242);
  background-image:-o-linear-gradient(top, #e0e0e0, #424242);
  background-image:linear-gradient(to bottom, #e0e0e0, #424242);
  text-decoration:none;
}
#frontButton:active{
  background:#f0f0f0;
  background-image:-webkit-linear-gradient(top, #f0f0f0, #858585);
  background-image:-moz-linear-gradient(top, #f0f0f0, #858585);
  background-image:-ms-linear-gradient(top, #f0f0f0, #858585);
  background-image:-o-linear-gradient(top, #f0f0f0, #858585);
  background-image:linear-gradient(to bottom, #f0f0f0, #858585);
  text-decoration:none;
}
#animation{
  opacity:0;
  text-align:center;
  max-width:100%;
  height:auto;
  width:auto\9;
}
#animation a{
  text-decoration:none;
}
#left{
  display:none;
  margin-right:2%;
  cursor:pointer;
}
#right{
  display:none;
  margin-left:2%;
  cursor:pointer;
}
.frontImage{
  margin-top:100px;
  border-width:3px;
  border-style:solid;
  -webkit-border-image:-webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image:-webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image:-moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
  -o-border-image:-o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  border-image:linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
  border-bottom:3px solid black;
}
#navbar{
  opacity:0;
  display:none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  padding: 10px 0px 0px 0px;
  background:black;
  background:-moz-linear-gradient(bottom,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background:-webkit-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  background:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#00000000',GradientType=0);
}
#navbar li{
  float: left;
  cursor:pointer;
}
#navbar li a{
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}
#navbar #lileft{
  margin-left: 5%;
  background:gray;
  background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00000000',GradientType=0);
}
#navbar #1a{
  opacity:0;
  background:gray;
  background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00000000',GradientType=0);
}
#navbar #2a{
  opacity:0;
  background:gray;
  background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00000000',GradientType=0);
}
#navbar #3a{
  opacity:0;
  background:gray;
  background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00000000',GradientType=0);
}
#navbar #4a{
  opacity:0;
  background:gray;
  background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00000000',GradientType=0);
}
#test{
  display: none;
}
#copyright{
  opacity:0;
  text-align:center;
  position:fixed;
  bottom:0px;
  width:100%;
  color:gray;
  margin:0px;
  padding: 10px 0px 0px 0px;
  font-size:12px;
  background:black;
  background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#000000',GradientType=0);
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Build 0.0</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
  </head>
  <body>
    <div id="enter">
      <a class="btn" id="frontButton" onclick="enter();">Enter</a>
    </div>
    <div id="animation">
      <a><img src="http://imgur.com/a2A4XaL.png" id="left" class="frontImage" onclick="pick(left);"/></a>
      <a><img src="http://i.imgur.com/KBJxtOG.png" id="right" class="frontImage"onclick="pick(right);"/></a>
    </div>
    <ul id="navbar">
      <div id="1a">
        <li id="lileft"><a id="gallery" onClick="click(gallery);">Gallery</a></li>
      </div>
      <div id="2a">
        <li><a id="news" onClick="click(news);">News</a></li>
      </div>
      <div id="3a">
        <li><a id="about" onClick="click(about);">About</a></li>
      </div>
      <div id="4a">
        <li><a id="inquire" onClick="click(inquire);">Inquire</a></li>
      </div>
    </ul>
    <h1 id="test"> hi </h1>
    <footer id="copyright">
      <p>&copy;2016 Nathan Brown</p>
    </footer>
  </body>
</html>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;