如何使导航栏可点击
[英]How to make the Nav bar clickable
问题描述
嘿，所以我在这个网站上工作，我学会了如何使用Navbar进行操作，以便颜色逐渐淡入，在它开始工作后，我无法获得任何链接。 据我了解，它与e.preventDefault（）有关 ，但是我不确定如何解决此问题。
这是我的代码
$(window).scroll(function() { // 100 = The point you would like to fade the nav in. if ($(window).scrollTop() > 100 ){ $('.bg').stop().animate({ opacity : 0.5 }, 10 ); } else { $('.bg').stop().animate({ opacity : 0.0 }, 200 ); }; }); $('.scroll').on('click', function(e){ e.preventDefault() $('html, body,').animate({ scrollTop : $(this.hash).offset().top }, 1500); });
/****NAV*****/ body{ background-color: #000; font-family: 'Trebuchet Ms'; } .container { width: 100%; height: 2000px; position: relative; /* font-family: 'Trebuchet Ms';*/ } .bg { background: #777; width: 100%; height: 100px; opacity: 1; } .fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } ul { height: 100px; margin: -70px auto 0 auto; width: 500px; } li { float: left; list-style: none; margin: 10px 20px; text-transform: uppercase; /* letter-spacing: 0px;*/ color: wheat; } li a { /* height: 100px;*/ text-transform: uppercase; color: wheat; font-family: 'Trebuchet Ms'; font-size: } /* a { text-align: center; font-size: 50px; color: #bdbdbd; font-weight: bold; text-decoration: none; letter-spacing: 5px; text-shadow: 1px 1px 1px #949494; position: relative; z-index: 1; margin: 0 auto; display: block; } a:hover { color: #a6a6a6; text-shadow: 1px 1px 1px #C9C9C9; } */ a { border-style: none; } a:link { text-decoration: none; } a:hover { color:wheat; } a:active { color: #2c9d91; text-decoration: inherit; } .down { top: 150px; } .up { top: 1800px; } /*******OVERLAY*******/ #writingoverlay { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; opacity: .5; /* background: radial-gradient( coral, gray, darkslategray);*/ /* background: radial-gradien( coral,darkslategray, gray);*/ /* background: radial-gradient(darkslategray 35%, dimgray, gray);*/ background: radial-gradient(lightgray, gray, dimgray); color: crimson } /* #video-overlay { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; background: linear-gradient(to bottom left, crimson, coral); opacity: 0.2; } */ /*****VIDEO FULL SCREEN*****/ video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } /*****FOOTER******/ footer { color: wheat; text-align: center; font-size: 20px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="main.js"></script> </head> <body> <div id="top" class="container"> <div class="fixed"> <div class="bg"></div> <ul class="navBar"> <li><a href="index.html">home</a> </li> <li><a href="gal.html">photography</a> </li> <li><a href="film.html">film</a> </li> <li><a href="contact.html">contact</a> </li> </ul> </div> </div> <footer>Contact info.</footer> <div id="writingoverlay"></div> <!-- <div id="video-overlay"></div> --> <div class="vidOverlay"> <video id="video" autoplay controls loop muted> <source src="/Img/8.mp4" type="video/mp4"> <source src="/Img/8.webm" type="video/webm"> </video> </div> </body> </html>
2 个解决方案
解决方案1
0 2015-04-08 03:00:30
我认为您错过了/，请尝试放入/index.html，而/是让您重定向路径。
<ul class="navBar">
<li><a href="/index.html">home</a>
</li>
<li><a href="/gal.html">photography</a>
</li>
<li><a href="/film.html">film</a>
</li>
<li><a href="/contact.html">contact</a>
</li>
</ul>
</div>
解决方案2
0 已采纳 2015-04-08 03:03:44
实际上，这与您的e.preventDefault不相关，而与您的不透明度动画有关。 基本上，您是在覆盖链接的div中引入了不透明标签。 如果要对此进行测试，则可以运行整个代码，而仅使用其他动画而不是不透明度，例如
height: '150px'
如果仅在开发人员控制台中编辑css样式标签以消除不透明性，也可以看到这种效果。
我认为，如果您更改此逻辑以使用navbar而不是bg，则可以使其正常运行。 我认为问题在于您的div覆盖了另一个div，因此您无法单击下面的div。
这对我有用，但是显然您必须更改css以匹配所需的内容：
if ($(window).scrollTop() > 100 ){
$('.navBar').stop().animate({
opacity : 0.5
}, 10);
} else {
$('.navBar').stop().animate({
opacity : 0.0
}, 200 );
};
如何使导航栏元素出现或消失
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.