个人中心
gpt4 book ai didi

javascript - 对于纯 html 中的母版页之类的功能，当单击 'home page' 按钮时，其 html 页面不会出现。请问为什么？

转载 作者：行者123 更新时间：2023-11-28 03:07:07 25 4
gpt4 key购买 nike

在下面的母版页功能中，当单击主页链接时，主页必须加载到页面的 #mainContent 部分。但它没有发生。我得到默认。看起来navigateto函数事件绑定(bind)是必须做的。不知道出了什么问题？

母版页

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        html, body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 12px;
            line-height: 1.428571429;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .Wrapper {
            min-height: 100%;
            position: relative;
            border: 5px green solid;
        }
        /*Pageheader*/
        header {
            background-color: #000000;
            color: #ffffff;
            padding: 15px;
            height: 175px;
            display: table-row;
        }

        /* Remove the navbar's default margin-bottom and rounded borders */
        .navbar {
            background-color: #000000;
            min-height: 32px !important;
            margin-bottom: 0;
            border-radius: 0;
        }

        .navbar-nav > li > a {
            font-weight: bold !important;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }

        .navbar-nav > li:hover {
            background-color: green;
        }
        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
        .row.content {
            /*height: 450px;*/
        }

        /* Set gray background color and 100% height */
        .sidenav {
            padding-top: 20px;
            background-color: #f1f1f1;
            height: 100%;
        }

        /* Set black background color, white text and some padding */
        footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            padding: 10px;
            height: 30px;
            bottom: 0;
            position: absolute;
            width: 100%;
        }

        /* On small screens, set height to 'auto' for sidenav and grid */
        @media screen and (max-width: 767px) {
            .sidenav {
                height: auto;
                padding: 15px;
            }

            /*.row.content {
                height: auto;
            }*/
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: table;
            width: 100%;
        }

        .page-row {
            display: table-row;
            height: 1px;
        }

        .page-row-expanded {
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        function NavigateTo(event,url) {
            
            $("#MainContent").load(url);
            event.preventDefault();
        }
    </script>
</head>
<body>
    <header>
        <img src="https://forums-asp.azureedge.net/resources/v-2016-07-25-001/cheetah/style/images/ui/asplogo-square.png" height="80" width="80" class="pull-left" />
        <h1 class="pull-right">This is header</h1>
    </header>
    <nav class="navbar navbar-inverse page-row">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#" onclick="NavigateTo(event,'PageHome.html')">HOME</a></li>
                    <li><a href="#" onclick="NavigateTo(event,'ContactUSPage.html')">CONTACT US</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid text-center page-row page-row-expanded">
        <div class="col-sm-2 sidenav">
            <p><a href="#">Link</a></p>
            <p><a href="#">Link</a></p>
            <p><a href="#">Link</a></p>
        </div>
        <div class="col-sm-8 text-left" id="MainContent">
            <h1>Welcome</h1>
            <hr>
            <h3>Test</h3>
            <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>ADS</p>
            </div>
            <div class="well">
                <p>ADS</p>
            </div>
        </div>
    </div>

    <footer class="container-fluid text-center page-row">
        <p>Footer Text</p>
    </footer>
</body>
</html>

首页html代码

**PageHome.html ** ---

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    Page Home!
</body>
</html>

最佳答案

检查您的浏览器控制台。您对 load() 的请求被 CORS 策略阻止，如果您在服务器上运行它，它将正常工作。

关于javascript - 对于纯 html 中的母版页之类的功能，当单击 'home page' 按钮时，其 html 页面不会出现。请问为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60511161/

25 4 0
文章推荐： javascript - 限制用户在当前时间之后输入 HTML <input type = "time">
文章推荐： CSS 移动设备和汉堡菜单
文章推荐： javascript - SweetAlert2 弹出窗口在 .php 文件中不起作用
文章推荐： javascript - 在新的 React 图表中使用从 Highcharts 编辑器导出的数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com