iT邦幫忙

0

有關網頁下拉選單的問題

小弟寫了個網頁, 與平常的網頁一樣, 每頁有一個下拉選單方便用者跳去不同的頁面. 現在, 做法是每個頁面都包含下拉選單的編碼. 但久而久之, 發現當加一個或更改一個選項, 必須每個頁面作修改, 改到有點呆. 有沒有方法是各頁面都通用一個含下拉選單的HTML. 好使有改動時, 只用改一個HTML檔?

看更多先前的討論...收起先前的討論...
外獅佬 iT邦大師 1 級 ‧ 2015-10-07 23:46:40 檢舉
試試:
html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="dropdown"></div>
.........
</body>
<script src="load.js"></script>
<script>
load_dropdown("dropdown");
</script>
</html>

-----------------------------
load.js:
function load_dropdown(obj_id){
  var obj = document.getElementById(obj_id);
  if(obj != null){
    obj.innerHtml = "<object type="text/html" data="dropdown.html" ></object>";
  }
}

你只要把你的下拉選單寫在dropdown.html就好了
以上的code未經測試,請發問者自行coding&test囉....謝謝
外獅佬 iT邦大師 1 級 ‧ 2015-10-07 23:47:34 檢舉
或者,直接把<object type="text/html" data="dropdown.html" ></object>
放到你的html試試,這樣,就不用動用javascript了
perry168 iT邦新手 2 級 ‧ 2015-10-09 15:50:46 檢舉
wiselou提到:
<object type="text/html" data="dropdown.html" ></object>


用Object我之前試過, 不知何解, 結果會有像IFRAME, 有SCROLL BAR及下拉單卡在FRAME架內.
perry168 iT邦新手 2 級 ‧ 2015-10-09 16:23:48 檢舉
wiselou提到:
<object type="text/html" data="dropdown.html" ></object>

落寞嘆氣
還是不成
0
newkevin
iT邦高手 1 級 ‧ 2015-10-03 20:52:12
最佳解答

N年前還有碰時,
是切版,上下2頁,或左右2頁,
然後把固定的選單固定在那一頁,都呼叫同一個頁面。
現在方法更多?

perry168 iT邦新手 2 級 ‧ 2015-10-03 22:20:44 檢舉

我之前也試了, 是頁框功能, 但下拉表只會在上部內, 不會正常申出.

newkevin iT邦高手 1 級 ‧ 2015-10-06 08:47:44 檢舉

對喔
當初是選單在頁框最上面,
然後那個頁框只有圖跟選單,
選項只有幾項,
不會超過圖,不像現在選單裡面一長串聯結,
現在不流行那種設計了。失神

4
kikulu
iT邦研究生 4 級 ‧ 2015-10-04 11:56:12

改用javascript load html 把html內容寫在js裡面

perry168 iT邦新手 2 級 ‧ 2015-10-04 21:26:22 檢舉

驚啊~ 是啊~ 明天測試一下.

perry168 iT邦新手 2 級 ‧ 2015-10-07 18:23:38 檢舉

哭不成功, 我用 window.location.href = "toppulldownmenu.html";, 卻只有toppulldownmenu.html顯示, 其他DIV中顯示的都沒出來.

外獅佬 iT邦大師 1 級 ‧ 2015-10-07 23:33:58 檢舉

perry168提到:
window.location.href = "toppulldownmenu.html";

汗暈落寞偷笑無言

0
frank98xp
iT邦新手 4 級 ‧ 2015-10-05 21:27:39

建議使用jQuery.ajax(),
看你是要直接載入html元素或是用json回傳再組合成select都可以

不論動靜態網頁,請愛用jQuery

perry168 iT邦新手 2 級 ‧ 2015-10-07 18:25:51 檢舉

知它好用, 汗但本人真不懂如何用.

0
外獅佬
iT邦大師 1 級 ‧ 2015-10-08 09:41:22

使用<object type="text/html" data="xxx.html"></object>
例如:a.html

&lt;pre class="c" name="code">

  
    &lt;title>test&lt;/title>
  
  
    &lt;object type="text/html" data="b.html" >&lt;/object>
  

b.html:

&lt;pre class="c" name="code">
&lt;script>
  function redirect(){
    var x = document.getElementById('dropdown').value;
    top.location.href=x;
  }
&lt;/script>
&lt;select id="dropdown" onchange="redirect()">
  &lt;option value="http://tw.yahoo.com">Yahoo Taiwan&lt;/option>
  &lt;option value="http://www.google.com.tw">Google&lt;/option>
&lt;/select>

記得,要自動跳轉頁面,這裡不能用window.location.href,要使用top.location.href,因為object標籤會被視為一個frame,即使成功跳轉,也只有object那個區塊會被跳轉到指定url
測試在IE 11、Chrome、Edge均可正常執行:

打完收工謝謝

perry168 iT邦新手 2 級 ‧ 2015-10-09 16:27:22 檢舉

驚我的下拉單是用li同ul建的. 是否我一直叫錯?

我要發表回答

立即登入回答