站点覆盖不起作用&;未捕获的ReferenceError:未定义closeav &;
Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
我试图编码一个网站只是为了学习,但我不能得到一些工作在我的网站与所有其他元素一起,但如果我单独编码的那一部分,它的工作。我说的是底部导航栏或"过滤器"。我想它滑下来,如果我按下"x",但它没有,在浏览器控制台中,我得到这个消息"未捕获的ReferenceError: closeNav未定义"answers"未捕获的ReferenceError: openNav未定义"下面是代码(相当混乱):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
@media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li><a href="home.html" id="NavBar">Home</a></li>
<li><a href="Componente.html" class="active" id="NavBar">Componente</a></li>
<li><a href="Periferice.html" id="NavBar">Periferice</a></li>
<li><a href="Contact.html" id="NavBar">Contact</a></li>
<li class="Login"><a href=""><span class="glyphicon glyphicon-log-in" ></span>Login</a></li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
<a href="javascript:void(0)" class="closebtn" onclick='closeNav()'><span class="glyphicon glyphicon-remove"></span></a>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
该网站仅适用于全高清显示器,因此在较小的显示器上看起来不太好。
JavaScript不是样式表
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
使用与页面中所有其他包含的脚本标签相同的脚本标签
<script src="ScrollBar.js"></script>
相关文章:
- 未捕获的ReferenceError:$未定义
- ReferenceError: not defined
- ReferenceError: cordova is not defined @ng-cordova.min.js:7
- 为什么JavaScript抛出'未捕获的ReferenceError:var未定义'定义var时
- Node.js错误“;ReferenceError:全局未定义“;在从0.10.2更新到0.12.2之后
- 未捕获的ReferenceError:未定义VM1299:1(匿名函数)
- React ReferenceError:未定义文档
- ReferenceError: $firebase is not defined
- 未捕获的ReferenceError:webkitNotifications未定义
- 尝试将js函数更改为coffeescript时发生Uncaught ReferenceError
- Web用户控件中Javascript的ReferenceError
- ReferenceError: crimeID is not defined
- Rails Uncaught ReferenceError:$$未定义为升级到jquery
- 懒惰加载插件抛出Uncaught ReferenceError
- 未捕获的ReferenceError:未定义测试(函数)
- 未捕获的ReferenceError:未在单击时定义
- ReferenceError:未定义角度
- Ionic应用程序在部署后给出ReferenceError:未定义Promise
- Uncaught ReferenceError:尝试在Android网络视图中访问时未定义函数
- ReferenceError:require未在javascript中定义