Question

我在右上角创建了一个下拉列表，列出了用户登录网站时的各种选项。目前，为了显示每个网页右上角的下拉列表，我正在每个HTML文件中编写HTML代码。

我正在尝试实现一个系统，我可以从网站的每个HTMl网页调用此代码，并且在单个文件中进行的一次更改将应用于所有网页..我无法弄清楚如何实现它。。请帮忙... HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Friends</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystore.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="main">
        <div class="collapse navbar-collapse" id="myNavbar1">
            <ul class="nav navbar-nav navbar-right" id="navbar1right">
                <li class="dropdown" id="subheader">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span id="salutation"></span> <span class="caret">  </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="postings.html"><span class="glyphicon glyphicon-phone"></span>Postings </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="wishlists.html"><span class="glyphicon glyphicon-heart-empty"></span>WishList </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="incomingrequests.html"><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedoutitems.html"><span class="glyphicon glyphicon-gift"></span>Leased Out Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedinitems.html"><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="friendslist.html"><span class="glyphicon glyphicon-user"></span>Friends </a></li>
                        <li role="separator" class="divider"></li>
                        <li id="logoutoptionmenu"><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

屏幕截图显示它在用户界面上的显示方式 ..

编辑1：

正如用户@ DelightedD0D所提到的，我删除了无序列表代码，并将其添加到与html文件相同的文件夹中的单独.inc文件中。我相应地在我的body标签中编辑了代码，并在head部分添加了以下jquery代码

     $(function(){
        $.get("menu.inc", function(response) {
              $('#myNavbar1').html(response);
              applyDynamicBindings('#myNavbar1');
        });
    });

    function applyDynamicBindings(container_selector){
         var $container=$(container_selector);
         $container.find("ul").click(function(){
             alert('triggered function bound to dynamic element');
         });
    }

不知何故，代码无法进入get方法，因为其中的警报未显示。甚至按钮也没有显示在浏览器中。

Answer 1

您可以使用简单的模板。为您的菜单编写html并将其保存在一个名为menu.inc的单独文件中（使用您想要的任何非标准扩展名），然后在需要显示菜单的任何页面上调用以下内容：

$.get('path_to/menu.inc', function(response) {
      $('#myNavbar1').html(response);
});

现在，如果您需要编辑菜单，可以在一个地方进行，并让更改自动影响所有页面。

因此，在您的网页中执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Friends</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystore.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
    <script>
        $(function(){
            $.get('path_to/menu.inc', function(response) {
                  $('#myNavbar1').html(response);
                   applyDynamicBindings('#myNavbar1');
            });
        });
        function applyDynamicBindings(container_selector){
             var $container=$(container_selector);
             $container.find('.some-menu-item').click(function(){
                 alert('triggered function bound to dynamic element');
             });
        }

    </script>
</head>
<body>
    <div id="main">
        <div class="collapse navbar-collapse" id="myNavbar1">
        </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

menu.inc只有这个：

            <ul class="nav navbar-nav navbar-right" id="navbar1right">
                <li class="dropdown" id="subheader">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span id="salutation"></span> <span class="caret">  </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="postings.html"><span class="glyphicon glyphicon-phone"></span>Postings </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="wishlists.html"><span class="glyphicon glyphicon-heart-empty"></span>WishList </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="incomingrequests.html"><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedoutitems.html"><span class="glyphicon glyphicon-gift"></span>Leased Out Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedinitems.html"><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="friendslist.html"><span class="glyphicon glyphicon-user"></span>Friends </a></li>
                        <li role="separator" class="divider"></li>
                        <li id="logoutoptionmenu"><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
                    </ul>
                </li>
            </ul>

从多个HTML文件访问单个下拉列表

1 个答案: