如何使導航欄可點擊
[英]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.