javascript - 网站覆盖不工作 "Uncaught ReferenceError: closeNav is not defined"-6ren

javascript - 网站覆盖不工作 "Uncaught ReferenceError: closeNav is not defined"

转载作者：行者123 更新时间：2023-11-28 04:58:57

我尝试编写一个站点代码只是为了学习，但我无法在我的站点上与所有其他元素一起工作，但如果我单独编写该部分代码，它就可以工作。我说的是底部导航栏或“过滤器”。如果我按下“x”，我希望它向下滑动，但它没有，在浏览器控制台中，我收到这条消息“未捕获的 ReferenceError:closeNav 未定义”和“未捕获的 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>

关于javascript - 网站覆盖不工作 "Uncaught ReferenceError: closeNav is not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40217852/

文章推荐： c++ - 内存分配对多线程性能的影响

文章推荐： css - SCSS 中的媒体查询 - 语法错误

文章推荐： jquery - 固定元素重叠到页脚

文章推荐： html - 使用 css 移动或隐藏标签

javascript - 王牌编辑器 "define is not defined"
我正在尝试添加 ace editor到我的应用程序。我从 github 下载它，将“ace/lib/ace”目录放到我的应用程序目录中，包括: " 在我的正文标签中: editor = ace.edi
typescript 模块 : defined is not defined
如果有人能介绍一下 TypeScript 1.8 模块，我将不胜感激。我有 SomeClass.ts 文件: export class SomeClass { } 然后，在我的 app.ts 中导入
php - “/*重载元素数据类型*/#define OE_IS_ARRAY (1<<0) #define OE_IS_OBJECT (1<<1) #define OE_IS_METHOD (1<<2)”是什么意思？
今天，当我阅读php内核代码时，在目录:php5.3/Zend/Zend.h中，有一行代码让我很困惑。代码如下: /* overloaded elements data types */ #defi
php - “/*重载元素数据类型*/#define OE_IS_ARRAY (1<<0) #define OE_IS_OBJECT (1<<1) #define OE_IS_METHOD (1<<2)”是什么意思？
今天看php的内核代码，在php5.3/Zend/Zend.h目录下，有一行代码搞得我一头雾水。代码如下: /* overloaded elements data types */ #define
javascript - 主干+RequireJS "define is not defined"
我有一个相当大的项目，我试图将所有 JS 文件连接到一个文件中。我已经能够做到这一点，但我在实际将这两个文件实现到代码中时遇到了麻烦。我的 Gruntfile 有一个执行串联的任务: require
c++ - "#define"与 "#define 1"
1在以下示例中似乎没有必要(并且可能具有误导性)，但是在用于检查 #ifdef 时我已经多次看到这种情况s: #ifndef __NEWLIB_H__ #define __NEWLIB_H__ 1 使
javascript - Uncaught ReferenceError : define is not defined
感谢您提供的任何帮助。我有一个 Grails 项目，我正在尝试将 Karma 安装到其中。但是，当我运行时 ./gradlew 构建我收到以下错误: [x-10-105-56-234]SENG519
javascript - 前端开发人员面试编码问题 : a not defined and b is defined?
我从 Frontend Developer Interview Coding Questions 得到了这个问题.为什么下面的代码片段会打印它打印的内容？我最初认为它会抛出一个 ReferenceEr
c++ - 如何在另一个#define 中实现#define？
之前的问题描述有歧义，所以我在下面修改了一些东西。谢谢。我想像这样实现一些宏: #define AddVariable(x) \ #define x (++counter) class Ba
c++ - 有没有办法在另一个#define 中执行#define？
我知道我正试图朝自己的腿开枪 ;) 但是，它可以让我使其余(大量)代码更小且更易读。有什么技巧可以在另一个预处理器宏中创建预处理器宏吗？这是我正在寻找的示例。我的真实场景更复杂 // That's
c++ - 没有#define 的调用约定 "defines"
在 Microsoft 的 WinDef.h 中引入了几个用于回调的#defines: #ifdef _MAC #define CALLBACK PASCAL #define WINAPI
c++ - 有没有办法在另一个#define 中执行#define？
我知道我想在腿上开枪；)但是，它可以让我使其余(大量)代码更小且更具可读性。在另一个预处理器宏中创建预处理器宏有什么棘手的方法吗？这是我正在寻找的示例。我的真实场景更复杂 // That's wh
c - 宏 "#define STR(x) #x"和 "#define STR(x) VAL(x)"与 "#define VAL(x) #x"有什么区别？
当我使用这段代码时: #include #define STR(x) #x int main(void) { printf(__FILE__ STR(__LINE__) "hello!\n"
vb6 - 在代码中获取错误 'User defined type not defined'
今天的问候，您好，我是使用 vb 6.0 的初学者。我正在使用以下代码并获得“用户定义类型未定义”。代码在下面。我得到错误的行被突出显示。请帮助。我应该添加一些引用或组件吗？如果是这样，它会是什么。
vb6 - 编译错误: user-defined type not defined
当我尝试编译此代码时，在 VB6 中出现编译错误“用户定义的类型未定义”。谁能告诉我需要做什么来解决这个错误？以下是我收到错误的行: Public Conn As ADODB.Connection P
ember.js - Ember JS : define is not defined
我最近将我的应用程序从 Ember 1.3 升级到了 Ember 2.4.2。然而，在使用 ember build --env production 将其部署到我的生产环境后，我注意到了一些问题。第
vba - '编译错误: User-defined type not defined'
这个问题在这里已经有了答案: Getting user-defined type not defined error when running code (2 个回答) 3年前关闭。我在运行程序以通
excel - “User-defined type not defined”，不突出显示VBE中的代码
在我的一个项目中，我最近进行了重构并重命名了很多。完成此步骤后，一切正常，所有单元测试都通过了，但是我遇到了以下问题。当我在VBE中执行“编译”时，确实出现了“用户定义的类型未定义”错误，并出现两种
C#define based in another #define 错误
所以我的 Visual Studio 将 tag1 和 tag2 都声明为未定义，但它们的定义很清楚，我不能根据另一个定义一个吗？ #define push 99 #de
vba - "User-defined type not defined"用于简单自定义类型
在 Excel 2007 中，我有以下非常简单的 VBA 代码: Public Type specType sb As Long End Type Private Sub MyButton_C

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 网站覆盖不工作 "Uncaught ReferenceError: closeNav is not defined"