Question

我尝试编写一个网站只是为了学习，但我无法在我的网站上使用所有其他功能，但如果我单独对该部分进行编码则可行。我正在谈论一个底部导航栏或＆＃34; Filter＆＃34;。如果我按下＆＃34; x＆＃34;我希望它向下滑动但它没有，并且在浏览器控制台中我收到此消息＆＃34; Uncaught ReferenceError：closeNav未定义＆＃34;和＆＃34;未捕获的ReferenceError：未定义openNav＆＃34; 这是代码（它非常混乱）：

＆＃13;

function openNav() {
    document.getElementById("myFilterTab").style.height = "100px";
}

function closeNav() {
    document.getElementById("myFilterTab").style.height = "0%";
}

＆＃13;

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/

*/

＆＃13;

<!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>

＆＃13;

该网站仅适用于全高清显示器，因此在较小的显示器中，它看起来不错。

Answer 1

JavaScript不是样式表

<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">

使用与页面中所有其他包含一样的脚本标记

<script src="ScrollBar.js"></script>

网站覆盖不起作用＆＃34;未捕获的ReferenceError：closeNav未定义＆＃34;

1 个答案: