如何使导航栏可点击
[英]How to make the Nav bar clickable
问题描述
Hey so I'm working on this website and I learned how to do this thing with the Navbar so the color fades in, I can't get any of the links to work after it starts to work. 
嘿，所以我在这个网站上工作，我学会了如何使用Navbar进行操作，以便颜色逐渐淡入，在它开始工作后，我无法获得任何链接。 From what I understand it has to do with e.preventDefault() , but I'm not sure how to fix this. 据我了解，它与e.preventDefault（）有关 ，但是我不确定如何解决此问题。
here is my code 这是我的代码
$(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
i think your missed a /, try to put /index.html , the / is for your to redirect your path. 我认为您错过了/，请尝试放入/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
This is actually not related to your e.preventDefault, it's related to your opacity animation. 实际上，这与您的e.preventDefault不相关，而与您的不透明度动画有关。 Basically, you are bringing an opacity tag to the div which is covering your link. 基本上，您是在覆盖链接的div中引入了不透明标签。 If you want to test this, you can run your entire code and just use a different animation instead of opacity, such as 如果要对此进行测试，则可以运行整个代码，而仅使用其他动画而不是不透明度，例如
height: '150px'
You can also see this effect if you just edit the css style tag to remove opacity in the developer console. 如果仅在开发人员控制台中编辑css样式标签以消除不透明性，也可以看到这种效果。
I think if you change this logic to use navbar instead of bg, you will get it to work. 我认为，如果您更改此逻辑以使用navbar而不是bg，则可以使其正常运行。 I believe the problem is that you have a div covering another div, so you can't click the div underneath. 我认为问题在于您的div覆盖了另一个div，因此您无法单击下面的div。
This works for me, but obviously you'll have to change your css to match what you need: 这对我有用，但是显然您必须更改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.