搜索
搜索

JS链接不起作用

Miroslav 发表于 Dev
45
米罗斯拉夫

我只想制作外部 JS 文件，我将在其中对 Web 进行编辑。但是当我尝试链接时，一些命令有效，而另一些则无效。例如。单击时切换有效，但是当我单击菜单中的链接时，该菜单不会隐藏并且不使用动画进行滚动。

这是代码：但在 jsfiddle 中它工作正常但当我尝试制作外部 script.js 时它无法正常工作

$( document ).ready(function() {	   
   $('.menu-toggle').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $(this).toggleClass('open');
    })
	});	
$(document).ready(function() {
    $('.menu-link').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 250);
      $('.menu-toggle').toggleClass('open');
    });
});	
	
$(document).ready(function($){       
     $('a').on('click', function(e){
           var $anchor = $(this).attr("href");
           var $hrefStart = $anchor.substr(0, 1);

           if ( $hrefStart == "#" ) {
               $('html,body').animate({
                   scrollTop: $($anchor).offset().top
               }, 1500, 'easeInOutExpo');

               e.preventDefault(); 
           } else {
               window.location.href = $anchor;
           }
     });
 })(jQuery);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;	
	
}

.container {
  width: 100%;	
  margin: 0 auto;
  padding: 0;
}
header {
  background-color: #1d1d1d;
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  z-index: 999;

}
header::after {
  content: '';
  clear: both;
  display: block;	
}
.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;	
  text-transform: uppercase;
  font-weight: 700;
}
.logo span {
  font-weight: 400;
 
}

.site-nav {
	position: absolute;
	background-color: #1d1d1d;
	top: 100%;
	right: 0;
	height: 0px;
	overflow: hidden;
	transition: .5s ease-in-out;
	opacity: 0;
	width: 100%;
	z-index: 99999;
}
.site-nav--open {
	height: 100vh;
	opacity: 100;

}
.site-nav ul {
	padding: 0;
	list-style: none;
	margin: 0;
	
}
.site-nav li {
	width: 100%;
	text-align: center;

/*	border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/*	border-bottom: none;	*/
}
.site-nav a {
	font-weight: 800;
	font-size: 40px;
	color: #9E9E9E;
	text-decoration: none;
	display: block;
	padding: 2em;
	text-transform: uppercase;
	z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
	
	color: white;
}
.menu-toggle {
	position: fixed;
	padding: 1em;
	position: absolute;
	right: .75em;
	top: .5em;
	cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	content: '';
	display: block;
	background-color: #2ecc71;
	height: 3px;
	width: 1.75em;
	border-radius: 3px;
	transition: .5s ease-in-out;
}
.hamburger::before {
	
	transform: translateY(-6px);
}
.hamburger::after {
	transform: translateY(3px);
	
}


.open .hamburger::before {
	opacity: 0;
}
.open .hamburger::after{
	transform: translateY(-3px) rotate(90deg);
	
}
.open .hamburger {
	transform: rotate(45deg);
}
#particles-js {
	height: 100vh;
	width: 100%;
	
}
#about {
	height: 100vh;
	
	
}
#portfolio {
	height: 100vh;
	background-color: blue;
	
}
#contact {
	height: 100vh;
	background-color: red;
}
h1.main {
  color: white;
  position: absolute;
  padding: 0;
  margin: 0 auto;
  top: 50%;
  display: inline-block;
  left: 50%;
  text-align: center;
  font-size: 4.5em;
  transform: translate(-50%,-50%);
}
h2 {
	color: white;
	position: absolute;
	top: 60%;
	left: 5%;
	font-size: 2em;
		
}
a.logo {
	text-decoration: none;
	color: #2ecc71;
}
span.home {
	position: absolute;
	top: 50%;
	right: 1%;
	transform: rotate(90deg);
	color: #fff;
	font-size: 1em;
}
span.about {
	position: absolute;
	top: 50%;
	left: 1%;
	transform: rotate(270deg);
	color: #fff;
	font-size: 1em;
}
a.about {
	text-decoration: none;
	color: #fff;
}

@media only screen and (max-width: 500px) {
	.site-nav a {
		padding: 2em;
		font-size: 1.5em;
	}
	
}
.show {
	
}

.text {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 10%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <meta name="description" content="Doplniť neskôr">
    </head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <body>
    <header>
      <div class="container">
        <a href="#particles-js" class="logo"><h1 class="logo">Lorem <span>ipsum</span></h1></a>
        <nav class="site-nav">
        <ul>
        	<li><a class="menu-link" href="#particles-js">Home</a></li>
        	<li><a class="menu-link" href="#about">Manipulations</a></li>
        	<li><a class="menu-link" href="#portfolio">Works</a></li>
        	<li><a class="menu-link" href="#contact">Contact</a></li>
        </ul>
        </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
        </div>
       </div>
    </header>
<div id="particles-js">
<h1 class="main"></h1>
<div class="text"><p>sssss</p></div>
</div>
<span class="home">Home</span>
<a href="#" class="about"><span class="about">About</span></a>

<div id="about">
        	
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="script.js"></script>
    </body>
</html>

卡尔蒂克

只需尝试此脚本的剥离版本...无需使用多个 document.ready 函数...并且如果 '$' 与 '$' 不冲突，也无需在 document.ready 函数中使用 jquery 别名（'$'）名称任何其他图书馆... 

$(document).ready(function(){       
 $('a').on('click', function(e){
       var $anchor = $(this).attr("href");
       var $hrefStart = $anchor.substr(0, 1);

       if ( $hrefStart == "#" ) {
           $('html,body').animate({
               scrollTop: $($anchor).offset().top
           }, 1500, 'easeInOutExpo');

           e.preventDefault(); 
       } else {
           window.location.href = $anchor;
       }
 });
 $('.menu-link').click(function() {
    $('.site-nav').toggleClass('site-nav--open', 250);
    $('.menu-toggle').toggleClass('open');
  });
  $('.menu-toggle').click(function() {
    $('.site-nav').toggleClass('site-nav--open', 500);
    $(this).toggleClass('open');
  })
 });
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;	
	
}

.container {
  width: 100%;	
  margin: 0 auto;
  padding: 0;
}
header {
  background-color: #1d1d1d;
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  z-index: 999;

}
header::after {
  content: '';
  clear: both;
  display: block;	
}
.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;	
  text-transform: uppercase;
  font-weight: 700;
}
.logo span {
  font-weight: 400;
 
}

.site-nav {
	position: absolute;
	background-color: #1d1d1d;
	top: 100%;
	right: 0;
	height: 0px;
	overflow: hidden;
	transition: .5s ease-in-out;
	opacity: 0;
	width: 100%;
	z-index: 99999;
}
.site-nav--open {
	height: 100vh;
	opacity: 100;

}
.site-nav ul {
	padding: 0;
	list-style: none;
	margin: 0;
	
}
.site-nav li {
	width: 100%;
	text-align: center;

/*	border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/*	border-bottom: none;	*/
}
.site-nav a {
	font-weight: 800;
	font-size: 40px;
	color: #9E9E9E;
	text-decoration: none;
	display: block;
	padding: 2em;
	text-transform: uppercase;
	z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
	
	color: white;
}
.menu-toggle {
	position: fixed;
	padding: 1em;
	position: absolute;
	right: .75em;
	top: .5em;
	cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	content: '';
	display: block;
	background-color: #2ecc71;
	height: 3px;
	width: 1.75em;
	border-radius: 3px;
	transition: .5s ease-in-out;
}
.hamburger::before {
	
	transform: translateY(-6px);
}
.hamburger::after {
	transform: translateY(3px);
	
}


.open .hamburger::before {
	opacity: 0;
}
.open .hamburger::after{
	transform: translateY(-3px) rotate(90deg);
	
}
.open .hamburger {
	transform: rotate(45deg);
}
#particles-js {
	height: 100vh;
	width: 100%;
	
}
#about {
	height: 100vh;
	
	
}
#portfolio {
	height: 100vh;
	background-color: blue;
	
}
#contact {
	height: 100vh;
	background-color: red;
}
h1.main {
  color: white;
  position: absolute;
  padding: 0;
  margin: 0 auto;
  top: 50%;
  display: inline-block;
  left: 50%;
  text-align: center;
  font-size: 4.5em;
  transform: translate(-50%,-50%);
}
h2 {
	color: white;
	position: absolute;
	top: 60%;
	left: 5%;
	font-size: 2em;
		
}
a.logo {
	text-decoration: none;
	color: #2ecc71;
}
span.home {
	position: absolute;
	top: 50%;
	right: 1%;
	transform: rotate(90deg);
	color: #fff;
	font-size: 1em;
}
span.about {
	position: absolute;
	top: 50%;
	left: 1%;
	transform: rotate(270deg);
	color: #fff;
	font-size: 1em;
}
a.about {
	text-decoration: none;
	color: #fff;
}

@media only screen and (max-width: 500px) {
	.site-nav a {
		padding: 2em;
		font-size: 1.5em;
	}
	
}
.show {
	
}

.text {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 10%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <meta name="description" content="Doplniť neskôr">
    </head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <body>
    <header>
      <div class="container">
        <a href="#particles-js" class="logo"><h1 class="logo">Lorem <span>ipsum</span></h1></a>
        <nav class="site-nav">
        <ul>
        	<li><a class="menu-link" href="#particles-js">Home</a></li>
        	<li><a class="menu-link" href="#about">Manipulations</a></li>
        	<li><a class="menu-link" href="#portfolio">Works</a></li>
        	<li><a class="menu-link" href="#contact">Contact</a></li>
        </ul>
        </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
        </div>
       </div>
    </header>
<div id="particles-js">
<h1 class="main"></h1>
<div class="text"><p>sssss</p></div>
</div>
<span class="home">Home</span>
<a href="#" class="about"><span class="about">About</span></a>

<div id="about">
        	
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="script.js"></script>
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

链接到 js 文件不起作用

.then的链接不起作用

vue.js v链接不起作用

jQuery插件-工具栏.js>链接不起作用

React JS min脚本链接不起作用

HTML 链接到 js 文件，但它仍然不起作用

符号链接不起作用

跳转链接不起作用

导航链接不起作用

Codeigniter链接不起作用

锚链接不起作用

通用链接不起作用

通用链接不起作用

文件链接不起作用

链接的预览不起作用

Ajax链接不起作用

HTML链接不起作用

CSS链接不起作用

导航链接不起作用

链接 VRF 不起作用

当您要使用链接组件时，外部链接在Next.js中不起作用

链接在 Razor 中不起作用

使用javascript的方法链接不起作用？

“点击”事件对链接图像不起作用

HTML书签链接不起作用

与Boost Filesystem的静态链接不起作用

链接的DataFlow块完成不起作用

分页中的链接不起作用

jQuery Mobile锚链接不起作用

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档