CSS 风格的下拉菜单启动各种 JavaScript 功能

Question

在我的 HTML 文件中，我创建了各种样式为 CSS 的下拉菜单。我无法解决的任务（除了我的 HTML 没有链接到我的外部 .css 文件）在 div id=nav 下，每个下拉选项应该使用一个 .js 启动不同的 java 脚本函数文件。


    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="m6a1.css">
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<title> HTML5</title>
</head>
<body>

  <div id="nav">
        <ul>
            <li><a href="browser">Browser Test</a></li>
            <li><a href="html">HTML Feature Test</a></li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropbtn">Mobile Tests</a>
              <div class="dropdown-content">
                <a href="#">Screen Resolution</a>
                <a href="#">Screen Orientation</a>
              <li class="dropdown">
              <a href="javascript:void(0)" class="dropbtn">Canvas Test</a>
              <div class="dropdown-content">
                <a href="#">General Support</a>
                <a href="#">Text Support</a>
                <a href="#">Draw Canvas</a>
              </div>
            </li>
          </ul>
          <div id="heading"></div>
          <h1>Click a menu item
              above to test various web features</h1>
          <div id="output"></div>
          <canvas id="myCanvas"></canvas>

</body>
</html>

这是说明要查找的内容：

我已经开始使用以下 js 代码来尝试获取请求的浏览器信息。我正试图通过获取其他信息来工作，但还没有接近完成的任何事情。我希望理解这第一部分将帮助我完成其余部分。

    {document.getElementById("#").innerHTML = "navigator.appCodeName is " +
navigator.appCodeName;
}


{document.getElementById("#").innerHTML = "navigator.appVersion" +
navigator.appVersion;
}

{document.getElementById("#").innerHTML = "navigator.appName is " + 
navigator.appName;
}

{document.getElementById("#").innerHTML =
"cookiesEnabled is " + navigator.cookieEnabled;

}

{document.getElementById("#").innerHTML = navigator.language;

}

{document.getElementById("#").innerHTML = navigator.platform;

}

{document.getElementById("#").innerHTML = navigator.userAgent;

}

谢谢大家的帮助

CSS 风格的下拉菜单启动各种 JavaScript 功能

问题描述投票：0回答：0

最新问题

CSS 风格的下拉菜单启动各种 JavaScript 功能

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0