如何使导航栏可点击

How to make the Nav bar clickable

本文关键字：何使导航更新时间：2023-09-26

嘿，我在这个网站上工作，我学会了如何用导航栏做这件事，这样颜色就会褪色，在它开始工作后，我无法获得任何链接。据我所知，这与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>

这实际上与e.preventDefault无关，它与不透明度动画有关。基本上，您将不透明度标记带到覆盖链接的div中。如果你想测试这一点，你可以运行你的整个代码，只需要使用不同的动画而不是不透明，比如

height: '150px'

如果您只是在开发人员控制台中编辑css样式标记以删除不透明度，您也可以看到这种效果。

我认为如果你改变这个逻辑，使用导航栏而不是bg，你就会让它工作起来。我认为问题是，您有一个div覆盖了另一个div，所以您不能单击下面的div。

这对我有效，但很明显，你必须更改你的css以匹配你需要的：

if ($(window).scrollTop() > 100 ){    
    $('.navBar').stop().animate({
        opacity : 0.5
    }, 10);
} else {
$('.navBar').stop().animate({
        opacity : 0.0
    }, 200 );
};

我想你错过了一个/，试着放/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>