在JQuery WebSite中删除菜单 [英] Remove The Menu In JQuery WebSite
本文介绍了在JQuery WebSite中删除菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好！
所以我对JQuery很陌生，不是新的HTML或CSS只是JQuery库..
所以我的问题是这是如何产生的。
我试图将该功能调用为隐藏菜单但是当我这样做时...它不会改变任何东西所有..
我在这里看不到的是什么？
我不是要求你创建我的整个文件我，我只是想了解我所缺少的东西。
这是HTML文件
Hello there!
So I am pretty new to JQuery, not new to HTML or CSS just the JQuery Library..
So my question is how this makes sence.
I am trying to call the function to "Hide" the menu but when I do it.. it doesnt change anything at all..
What is it that I am not seeing here?
I am not here to ask you to create my whole file for me, I am just trying to get the understanding on what I am missing.
This is the HTML File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Kinzi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
This is where it starts
<script src="C:\Users\User\Desktop\0781\js\jquery.js"></script>
<script>
$(document).ready(function() {
$("#menu").hide();
});
</script>
And this is where it ends
<div id="container">
<div id="header">
<div class="headtitle">Varga Dev</div>
</div>
<div id="menu">
<ul>
<li><a href="#" title="">HOME</a></li>
<li><a href="#" title="">ABOUT US</a></li>
<li><a href="#" title="">NEWS</a></li>
<li><a href="#" title="">CONTACT US</a></li>
<li><a href="#" title="">LINKS</a></li>
</ul>
</div>
<div id="content">
<div id="insidecontent"> <br>
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
</p>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
</p>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer"> <span>Copyright © 2015 | All Rights Reserved </span>
</div>
</div>
</body>
</html>
这是CSS
And this is the CSS
body
{
font-size: 62.5%;
margin: 0;
padding: 0;
background-color: #000;
font-family: 'lucida grande', arial, tahoma, sans-serif;
}
#container
{
margin: 0 auto;
padding-top:20px;
width: 683px;
position: relative;
background-color: #333;
}
#header
{
margin: 0 auto;
width: 640px;
height: 250px;
background: transparent url('header.jpg') top left no-repeat;
}
.headtitle
{
position: relative;
font-family: Times;
font-size: 30px;
color: #FFF;
top: 210px;
left: 12px;
}
#menu
{
margin: 0 20px;
height: 29px;
padding: 5px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: #767676;
padding: 10px 7px 10px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: none;
}
#menu ul li a:hover
{
background-color: #6A7919;
color: #FDFDFD;
}
#content
{
min-height: 390px;
width: 640px;
margin: 0 auto;
background-color:#FDFDFD;
}
#insidecontent
{
float: left;
padding-left: 25px;
padding-right: 25px;
width: auto;
}
#insidecontent p
{
margin: 0;
color: #767676;
font-family: Tahoma;
font-size: 1.2em;
line-height: 170%;
}
h1
{
margin: 0;
font-weight: normal;
color: #6A7919;
font-size: 2.5em;
font-family:Times;
}
h2
{
margin: 0;
display: inline;
position: relative;
top: -1.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}
h3
{
margin: 0;
font-size: 1.5em;
font-weight: normal;
color: #94C258;
}
#footer
{
margin: 0 auto;
width: 641px;
height: 39px;
}
#footer span
{
display: block;
position: relative;
font-family: Tahoma;
font-size: 1.2em;
padding: 10px;
color: #767676;
}
推荐答案
（ document ）。ready（ function （）{
(document).ready(function() {
（ ＃menu）。hide（）;
}）;
< / script >
这是结束
< div id = 容器 >
< div id = header >
< div class = headtitle > Varga Dev < / div >
< / div >
< div id = 菜单 >
< span class =code-keyword>< ul >
< li > < a href = ＃ title = >HOME</a ></li>
<li< span class=\"code-keyword\">><a href=\"#\" title=\"\">ABOUT US</a></li>
<li><a href=\"#\" title=\"\">NEWS</a></li>
<li><a href=\"#\" title=\"\">CONTACT US</a></li>
<li><a href=\"#\" title=\"\">LINKS</a></li>
</ul>
</div>
<div id=\"content\">
<div id=\"insidecontent\"> <br>
<h1>Welcome</h1>
<p>
\t Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。
\t <br><br>
\t </p>
\t <h1>Lorem ipsum</h1>
<p>
\t Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。
\t <br><br>
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。
\t <br><br>
\t </p>
\t
</div>
<div style=\"clear: both;\"></div>
</div>
<div id=\"footer\"> <span>Copyright © 2015 | All Rights Reserved </span>
</div>
</div>
</body>
</html>
("#menu").hide(); }); </script> And this is where it ends <div id="container"> <div id="header"> <div class="headtitle">Varga Dev</div> </div> <div id="menu"> <ul> <li><a href="#" title="">HOME</a></li> <li><a href="#" title="">ABOUT US</a></li> <li><a href="#" title="">NEWS</a></li> <li><a href="#" title="">CONTACT US</a></li> <li><a href="#" title="">LINKS</a></li> </ul> </div> <div id="content"> <div id="insidecontent"> <br> <h1>Welcome</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br> </p> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br> </p> </div> <div style="clear: both;"></div> </div> <div id="footer"> <span>Copyright © 2015 | All Rights Reserved </span> </div> </div> </body> </html>
And this is the CSS
And this is the CSS
body
{
font-size: 62.5%;
margin: 0;
padding: 0;
background-color: #000;
font-family: 'lucida grande', arial, tahoma, sans-serif;
}
#container
{
margin: 0 auto;
padding-top:20px;
width: 683px;
position: relative;
background-color: #333;
}
#header
{
margin: 0 auto;
width: 640px;
height: 250px;
background: transparent url('header.jpg') top left no-repeat;
}
.headtitle
{
position: relative;
font-family: Times;
font-size: 30px;
color: #FFF;
top: 210px;
left: 12px;
}
#menu
{
margin: 0 20px;
height: 29px;
padding: 5px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: #767676;
padding: 10px 7px 10px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: none;
}
#menu ul li a:hover
{
background-color: #6A7919;
color: #FDFDFD;
}
#content
{
min-height: 390px;
width: 640px;
margin: 0 auto;
background-color:#FDFDFD;
}
#insidecontent
{
float: left;
padding-left: 25px;
padding-right: 25px;
width: auto;
}
#insidecontent p
{
margin: 0;
color: #767676;
font-family: Tahoma;
font-size: 1.2em;
line-height: 170%;
}
h1
{
margin: 0;
font-weight: normal;
color: #6A7919;
font-size: 2.5em;
font-family:Times;
}
h2
{
margin: 0;
display: inline;
position: relative;
top: -1.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}
h3
{
margin: 0;
font-size: 1.5em;
font-weight: normal;
color: #94C258;
}
#footer
{
margin: 0 auto;
width: 641px;
height: 39px;
}
#footer span
{
display: block;
position: relative;
font-family: Tahoma;
font-size: 1.2em;
padding: 10px;
color: #767676;
}I have tried your code and it works just fine(menu is hidden).
Only differences are that I used jquery from my machine(You can cross check your jquery file validity using @Andy Lang’s suggestion) and your header image is missing(I guess that’s in your local folder)
If it still did not work for you, please open the developer tool in your browser and look for logged errors/messages in your console.
For example: If you get the below error, it means that you have not defined Jquery.
I have tried your code and it works just fine(menu is hidden).
Only differences are that I used jquery from my machine(You can cross check your jquery file validity using @Andy Lang's suggestion) and your header image is missing(I guess that's in your local folder)
If it still did not work for you, please open the developer tool in your browser and look for logged errors/messages in your console.
For example: If you get the below error, it means that you have not defined Jquery.
Uncaught ReferenceError:这篇关于在JQuery WebSite中删除菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
