我在右上角創建了一個下拉列表,列出用戶登錄網站時的各種選項。目前要顯示每個網頁右上角的下拉列表,我在每個HTML文件中編寫HTML代碼。從多個HTML文件訪問單個下拉列表
我試圖實現一個系統,我可以從網站中的每個HTMl網頁調用此代碼,並且在單個文件中進行的更改應用於所有網頁..我無法弄清楚如何實現它..Please幫助... HTML代碼
<!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>
它是如何看起來UI屏幕截圖..
EDIT 1:
作爲由用戶@ DelightedD0D我除去無序列表代碼中提到並在同一文件夾中的HTML文件在一個單獨的文件。公司加入。我在我的身體標記相應的編輯的代碼,並添加下面的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方法作爲警報裏面是沒有得到顯示它。即使按鈕沒有在瀏覽器中顯示。
如何用戶nevigate您頁/ –
通過鏈接,其中有些是與顯示在下拉列表中... – Lucy