HTML5中的Javascript（0）和外部Javascript

Question

我想知道是否有人可以帮助我。 我坚持使用此代码，当我单击脚本并在切换窗口外单击时，脚本会在按钮上切换按钮，经过2个小时的搜索和测试后，该按钮将消失。 我仍然不知道。 目前，该脚本甚至无法在切换菜单甚至无法显示的地方运行。 当像TopMenuScript.js这样运行外部JSscript时，它说引用错误，函数未定义ReferenceError：DropdownFunction未定义

HTML5

<%@ Page Language="C#" AutoEventWireup="true"  CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    #form1 {
        width: 1021px;
    }
    .TopPanel {}
    body,html{
        height:100%;
        width:100%;
        overflow:auto;
        margin:0;
        padding:0;
    }
    .TopBannerImage {
        background:url(../Images/topPanel_3croped.png) center;
        height:315px;
        min-width:100%;
        background-repeat:no-repeat;
    }
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
    <ul id="ul_Top">
        <li><a class ="active" href="#home">Home</a></li>
        <li style="float:right !important"><a href="#news">News</a></li>
        <li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="DropdownFunction()">Dropdown</a>
<div class="dropdown-content" id="MenuDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
        </li>
    </ul>
</div>
<div class="TopBannerImage">

</div>
<!--All Site Scripts -->
<!-- <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script> -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
</body>

Java脚本

 <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script>

具有相同脚本的外部脚本链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>

的CSS

    .TopPanel
{
    border-style:ridge;
    border-width:2px;
    border-color:black;
    margin:auto;
    padding: 0px;
    text-align: center;
    background-size:cover;
    background-image url(../Images/background.jpg);
    background-repeat: no-repeat;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    height: 49px;
}
li{
    float:left;
}
li a, .dropbin {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
    background-color:black;
}
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)
}
.dropdown-content a {
    color:black;
    padding:12px 16px;
    text-decoration: none;
    display:block;
}
.dropdown-content .dropdown-content {
    display:block;
}
body{margin:0;padding:0;}
.show {display:block;}

Answer 1

我已经为您清理并修复了所有内容。 在Visual Studio 2015中运行它，效果很好，还修复了UI。 问题的主要原因，语法错误和拼写错误。 您想确保JavaScript中没有语法错误。 一个错误的语法，它将导致它。 我相信我们看到的错误是您页面上未看到的错误。 在编码中区分大小写-继续编码，无论失败多少，因为学习无止境

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>

您的HTML5代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    #form1 {
        width: 1021px;
    }
    .TopPanel {}
    body,html{
        height:100%;
        width:100%;
        overflow:auto;
        margin:0;
        padding:0;
    }
    .TopBannerImage {
        background:url(../Images/topPanel_3croped.png) center;
        height:315px;
        min-width:100%;
        background-repeat:no-repeat;
    }
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
    <ul id="ul_Top">
        <li><a class ="active" href="#home">Home</a></li>
        <li style="float:right !important"><a href="#news">News</a></li>
        <li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="DropdownFunction()">Dropdown</a>
<div class="dropdown-content" id="MenuDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
        </li>
    </ul>
</div>
<div class="TopBannerImage">

</div>
<!--All Site Scripts -->
<!-- <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script> -->
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="JavaScript/TopMenuScript.js" ></script>
</body>
</html>

您的JavaScript代码

function DropdownFunction() {
    document.getElementById("MenuDropdown").classList.toggle("show");
}

window.onclick = function (e) {
    if (!e.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var d = 0; d < dropdowns.length; d++) {
            var openDropdown = dropdowns[d];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

您的CSS代码

    .TopPanel
    {
    border-style:ridge;
    border-width:2px;
    border-color:black;
    margin:auto;
    padding: 0px;
    text-align: center;
    background-size:cover;
    background-image url(../Images/background.jpg);
    background-repeat: no-repeat;

    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 49px;
    }
    li{
    float:left;
}
    li a, .dropbin {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;

}
    li a, .dropdown:hover .dropbtn {
    background-color:black;
}
    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)
}
    .dropdown-content a {
    color:white;
    padding:12px 16px;
    text-decoration: none;
    display:block;
    text-align:left;
}
    .dropdown-content .dropdown-content {
    display:block;
}
    body{margin:0;padding:0;}
    .dropdown-content a:hover {background-color:#f1f1f1}
    .show {display:block;}


    #BannerImage {
    background-image: url('/Images/topPanel_3croped.png');
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

    #my-div{
    margin-left:auto;
    margin-right:auto;
}

HTML5中的Javascript（0）和外部Javascript

问题描述

1 个解决方案

解决方案1
-1 已采纳 2016-10-16 13:13:24

HTML5中的Javascript（0）和外部Javascript

问题描述

1 个解决方案

解决方案1 -1 已采纳 2016-10-16 13:13:24

解决方案1
-1 已采纳 2016-10-16 13:13:24