簡體   English   中英

HTML5中的Javascript(0)和外部Javascript

[英]Javascript(0) along with external Javascript in HTML5

我想知道是否有人可以幫助我。 我堅持使用此代碼,當我單擊腳本並在切換窗口外單擊時,腳本會在按鈕上切換按鈕,經過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;}

我已經為您清理並修復了所有內容。 在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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM