Question

在预览中一切正常，但是当我在任何其他软件上运行它时，javascript都无法链接-我知道这是由于两件事：

无论是否链接了javascript，它都是完全一样的
它只是不执行其应做的工作-javascript的目的是使您单击菜单按钮时所有项目都掉下来，但在此未发生任何事情。

我尝试制作rel =“ script”，但这无济于事。

var open = false;

function Drop(n) {
	var i;
	if (open == false) {
		for (i = n; i < 5; i++) {
			Drp(i)
		}
		open = true
	} else if (open == true) {
		for (i = n; i < 5; i++) {
			Cls(i)
		}
		open = false
	}
}

function Drp(n) {
	var elem = document.getElementsByClassName("menu-con")[n];
	var pos = -1 * window.innerHeight - n * 100;
	var id = setInterval(frame, 5);

	function frame() {
		if (pos >= -10) {
			clearInterval(id);
			elem.style.top = 0 + 'px';
		} else {
			pos += 10;
			elem.style.top = pos + 'px';
		}
	}
}

function Cls(n) {
	var elems = document.getElementsByClassName("menu-con")[n];
	var poss = 0;
	var ids = setInterval(frames, 5);

	function frames() {
		if (poss <= -1 * window.innerHeight) {
			clearInterval(ids);
			elems.style.top = -1 * window.innerHeight + 'px';
		} else {
			poss += -7 - n * 2;
			elems.style.top = poss + 'px';
		}
	}
}

* {box-sizing: border-box;max-width: 100%;font-family: 'Gruppo', cursive;}
html,body {height: 100%;margin: 0;padding: 0;background:rgb(240,240,240)}

.menu-icon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 50px;height: 5px;background: rgb(190,190,190);position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}

.menu {width: 100%;height: 100%;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.menu-con {-webkit-flex-grow: 1;flex-basis: 0;flex-grow: 1;display: -webkit-flex;display: flex;-webkit-justify-content:space-around;position:relative;top:-100%;transition:all 0.5s}
.menu-con p:before {content: ""; display: block;position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;opacity: 1;background: rgba(0,0,0,0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-con:hover p:before {background: rgba(0,0,0,0.2)}
.menu-con p {height:20px;-webkit-align-self:center;color:white;font-size:25px;z-index:2;cursor:pointer}
@media screen and (max-width: 600px) {.menu-con {min-width:50%}}
@media screen and (max-width: 350px) {.menu-con {min-width:100%}}

<link href=style.css rel="stylesheet">
<link href="main.js">
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
	<div class="menu-bar menu-bar1"></div>
	<div class="menu-bar menu-bar2"></div>
	<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
	<div class="menu-con" style="background:IndianRed;"><p>HOME</p></div>
  <div class="menu-con" style="background:rgb(160,160,170);"><p>GALLERY</p></div>  
  <div class="menu-con" style="background:mediumseagreen;"><p>PRODUCTS</p></div> 
  <div class="menu-con" style="background:teal;"><p>ABOUT</p></div> 
  <div class="menu-con" style="background:rgb(70,70,70);"><p>CONTACT</p></div>
</div>

Answer 1

您可以通过以下方式包含JavaScript文件-这些示例说明了如何在HTML4和HTML5（Script element - Basic usage）中使用<script>元素导入脚本：

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="main.js"></script>

我的建议是使用以下HTML5：

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

HTML脚本元素用于嵌入或引用可执行代码；通常用于嵌入或引用JavaScript代码。

来源：The Script element

链接用于样式表，您可以在此处进一步阅读： HTML link Tag

Answer 2

要包含js，您必须使用

<script type="text/javascript" src="main.js"></script>

此javascript的“ rel”应该是什么？

2 个答案: