2015-12-15 58 views
0

我在右上角創建了一個下拉列表,列出用戶登錄網站時的各種選項。目前要顯示每個網頁右上角的下拉列表,我在每個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屏幕截圖..

Drop Down List

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方法作爲警報裏面是沒有得到顯示它。即使按鈕沒有在瀏覽器中顯示。

+0

如何用戶nevigate您頁/ –

+0

通過鏈接,其中有些是與顯示在下拉列表中... – Lucy

回答

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> 
+0

或類似的解決方案在這裏找到http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Bindrid

+0

@ DelightedD0D我是否需要只複製身體標記內的代碼或頭標記中的代碼? – Lucy

+0

只是你的菜單本身的代碼。虐待更新 – DelightedD0D