这段JavaScript的rel属性应设为多少？菜单交互失效求助

First off, let's get to the root of why your JavaScript isn't working outside the preview environment—you're using the wrong HTML tag to load your script. The <link> tag is meant for stylesheets, favicons, and other non-script resources, so your browser is completely ignoring that line referencing main.js. That's exactly why whether you include it or not, nothing changes: the code never runs at all.

Step 1: Fix the Script Inclusion #

Replace this incorrect line:

<link href="main.js">

With the proper <script> tag, which tells browsers to load and execute JavaScript:

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

Step 2: Quick Additional Checks #

While the tag issue is the main culprit, here are a couple of quick checks to ensure everything runs smoothly:

• File Path: Double-check that main.js is in the same folder as your HTML file. If it's in a subfolder (like js/), update the path to src="js/main.js".
• Browser Console: Always use your browser's developer tools (hit F12, then go to the Console tab) to spot errors—this will instantly tell you if the script failed to load or has syntax issues.

Corrected Full Code #

Here's the fixed HTML, plus your existing CSS/JS for reference:

HTML

<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
<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>

CSS (unchanged)

* {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%}}

JavaScript (unchanged)

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'; } } }

Why This Works #

Once you use the <script> tag, the browser will properly load your JavaScript, so the Drop() function will actually execute when you click the menu icon. The preview environment likely had some auto-correction or inline script handling that hid this mistake, but standard browsers/software won't do that.

内容的提问来源于stack exchange，提问作者YeahItsBen