如何使导航栏可点击答案

【问题标题】：How to make the Nav bar clickable如何使导航栏可点击
【发布时间】：2015-04-08 02:32:27
【问题描述】：

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

【问题讨论】：

您可以在纯 CSS3 中使用 animations 进行淡入淡出。从那里在 jQuery 中添加一些 $('selector').click( 函数应该没有问题。

标签： javascript jquery html css preventdefault

【解决方案1】：

这实际上与您的 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 );
};

【讨论】：

【解决方案2】：

我认为你错过了 /，试着把 /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>

【讨论】：

如果这没有帮助告诉我，我会删除这个答案。