包含脚本标记中的JQuery文件不起作用 [英] include the JQuery file within a script tag doesnt work
本文介绍了包含脚本标记中的JQuery文件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以..
我的问题是我无法声明任何JQuery函数，因为我的JQuery文件不想工作或者看起来似乎......
这是第三次与我斗争。
我已经尝试将其更改为文件目录但是它不想加入我的身边&合作社..
这就是问题所在，因为你可以看到文字是白色的，因为它没有正常运作;
http://imgur.com/jHzExKb [ ^ ]
这就是我的文件设置方式;
https://gyazo.com/d10124468e6bfdf8b47ece2f9f1cb5cb [ ^ ]
https://gyazo.com/9d356f815ed5c1b4594e3129e8eacd6d [ ^ ]
&这是源代码的样子
So..
My issue im having is that I cant declare any JQuery functions because my JQuery file doesnt want to work or so it seems..
This is around the 3rd time its struggleing with me.
I've tried changing it to the file directory but It doesnt want to join my side & co-op..
This is what the issue looks like, as you can see the text is white as in it doesnt function properly;
http://imgur.com/jHzExKb[^]
This is how my files are setup;
https://gyazo.com/d10124468e6bfdf8b47ece2f9f1cb5cb[^]
https://gyazo.com/9d356f815ed5c1b4594e3129e8eacd6d[^]
& here is what the source code looks like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: "Helvetica Neue", Helvetica, Arial;}
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
});
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
#sidebar{
background: #151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition: left 0.3s linear;
}
#sidebar.visible{
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
ul li a{
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn{
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin-bottom: 20px;
}
#sidebar-btn span{
height: 1px;
background: #111;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2){
width: 75%;
}
#sidebar-btn span:nth-child(3){
width: 50%;
}
/*Menu CSS*/
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
<!-- Full Width Responsive Slider -->
<div class="container">
<!-- <div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/picOne.jpg">
<img src="images/picTwo.jpg">
<img src="images/picThree.jpg">
</div> -->
<!-- Full Width Responsive Slider -->
</body>
</html>
推荐答案
（document）.ready（function（）{
(document).ready(function(){
（'＃sidebar-btn'）。 click（function（）{
('#sidebar-btn').click(function(){
（'#sidebar'）。 addClass（'visible'）;
}）;
}）;
。 container {
height ： 100％;
width < span class =code-keyword>： 100％;
溢出 ： 隐藏;
}
。< span class =code-leadattribute> cycle-slideshow {
height ： 100％;
width ： 100％;
display ： block;
position ： relative;
margin ： 0 auto;
}
。 cycle -prev ，。 cycle-next {
font-size ： 200;
颜色 ： #FFF;
display ： block;
position ： 绝对;
top ： 50％;
margin-top ： -16px;
z-index ： 9999;
cursor ： 指针;
}
。 cycle-prev { left ： 10％; }
。 cycle-next {正确 ： 10％; }
。 cycle-pager {
width < span class =code-keyword>： 100％;
text-align <温泉n class =code-keyword>： center;
display < span class =code-keyword>： block;
position < span class =code-keyword>： 绝对;
position < span class =code-keyword>： top;
bottom < span class =code-keyword>： 20px;
z-index ： 9999;
}
。 cycle-pager span {
text-indent ： 100％;
white-space ： nowrap; ;
width ： 12px;
height ： 12px;
display ： inline-block;
border ： 1px solid #FFF ;
border-radius ： 50％;
margin ： 0 10px;
cursor ： 指针;
}
。 cycle-pager 。 cycle-pager-active { background ： #FFF; }
＃侧栏 {
background ： ＃151718;
width ： 200px;
height ： 100％;
display ： block;
position ： 绝对;
left ： - 200px;
top ： < span class =code-keyword> 0px;
transition ： < span class =code-keyword> left 0.3s linear;
}
＃ sidebar 。可见 {
left ： 0px;
transition ： 左0.3s线性;
}
ul {
margin ： 0;
padding ： 0;
}
ul li {
list-style ： none;
}
ul li a {
background ： ＃1C1E1F;
color ： #ccc;
border-bottom ： 1px solid＃111;
display ： block;
width ： 180px;
padding ： 10px;
text-decoration ： 无;
}
＃sidebar-btn{
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin-bottom: 20px;
\t
}
#sidebar-btn span{
height: 1px;
background: #111;
margin-bottom: 5px;
display: block;
\t
}
#sidebar-btn span:nth-child(2){
width: 75%;
\t
}
#sidebar-btn span:nth-child(3){
width: 50%;
\t
}
/*Menu CSS*/
/*Menu CSS*/
</style>
</head>
<body>
<div id=\"sidebar\">
\t<ul>
\t\t<li><a href=\"#\">Link1</a></li>
\t\t<li><a href=\"#\">Link2</a></li>
\t\t<li><a href=\"#\">Link3< /a></li>
\t\t<li><a href=\"#\">Link4</a></li>
\t</ul>
</div>
<div id=\"sidebar-btn\">
\t<span></span>
\t<span></span>
\t<span></span>
</div>
<!-- Full Width Responsive Slider -->
<div class=\"container\">
<!-- <div class=\"cycle-slideshow\">
<span class=\"cycle-prev\">〈</span>
<span class=\"cycle-next\">〉</span>
<span class=\"cycle-pager\"></span>
<img src=\"images/picOne.jpg\">
<img src=\"images/picTwo.jpg\">
<img src=\"images/picThree.jpg\">
< / div> -->
<!-- Full Width Responsive Slider -->
</body>
</html>
('#sidebar').addClass('visible'); }); }); .container{ height:100%; width:100%; overflow: hidden; } .cycle-slideshow { height: 100%; width: 100%; display: block; position: relative; margin: 0 auto; } .cycle-prev, .cycle-next { font-size: 200; color: #FFF; display: block; position: absolute; top: 50%; margin-top: -16px; z-index: 9999; cursor: pointer; } .cycle-prev {left: 10%;} .cycle-next{right: 10%;} .cycle-pager{ width: 100%; text-align: center; display: block; position: absolute; position: top; bottom: 20px; z-index: 9999; } .cycle-pager span { text-indent: 100%; white-space: nowrap;; width: 12px; height: 12px; display: inline-block; border: 1px solid #FFF; border-radius: 50%; margin: 0 10px; cursor: pointer; } .cycle-pager .cycle-pager-active {background: #FFF;} #sidebar{ background: #151718; width:200px; height:100%; display:block; position:absolute; left:-200px; top:0px; transition: left 0.3s linear; } #sidebar.visible{ left: 0px; transition: left 0.3s linear; } ul { margin: 0; padding: 0; } ul li{ list-style: none; } ul li a{ background: #1C1E1F; color: #ccc; border-bottom: 1px solid #111; display: block; width: 180px; padding: 10px; text-decoration: none; } #sidebar-btn{ display: inline-block; vertical-align: middle; width: 20px; height: 150px; cursor: pointer; margin-bottom: 20px; } #sidebar-btn span{ height: 1px; background: #111; margin-bottom: 5px; display: block; } #sidebar-btn span:nth-child(2){ width: 75%; } #sidebar-btn span:nth-child(3){ width: 50%; } /*Menu CSS*/ /*Menu CSS*/ </style> </head> <body> <div id="sidebar"> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> </ul> </div> <div id="sidebar-btn"> <span></span> <span></span> <span></span> </div> <!-- Full Width Responsive Slider --> <div class="container"> <!-- <div class="cycle-slideshow"> <span class="cycle-prev">〈</span> <span class="cycle-next">〉</span> <span class="cycle-pager"></span> <img src="images/picOne.jpg"> <img src="images/picTwo.jpg"> <img src="images/picThree.jpg"> </div> --> <!-- Full Width Responsive Slider --> </body> </html>
这篇关于包含脚本标记中的JQuery文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
