有關網頁下拉選單的問題

網頁設計

perry168 2015-10-03 14:12:00 ‧ 6940 瀏覽

分享至

小弟寫了個網頁, 與平常的網頁一樣, 每頁有一個下拉選單方便用者跳去不同的頁面. 現在, 做法是每個頁面都包含下拉選單的編碼. 但久而久之, 發現當加一個或更改一個選項, 必須每個頁面作修改, 改到有點呆. 有沒有方法是各頁面都通用一個含下拉選單的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邦新手 1 級 ‧ 2015-10-09 15:50:46 檢舉

wiselou提到：
<object type="text/html" data="dropdown.html" ></object>

用Object我之前試過, 不知何解, 結果會有像IFRAME, 有SCROLL BAR及下拉單卡在FRAME架內.

perry168 iT邦新手 1 級 ‧ 2015-10-09 16:23:48 檢舉

wiselou提到：
<object type="text/html" data="dropdown.html" ></object>

還是不成

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

newkevin

iT邦高手 1 級 ‧ 2015-10-03 20:52:12

最佳解答

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

回應 2
分享
檢舉

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

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

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

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

登入發表回應

kikulu

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

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

回應 3
分享
檢舉

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

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

perry168 iT邦新手 1 級 ‧ 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";

登入發表回應

frank98xp

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

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

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

回應 1
分享
檢舉

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

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

登入發表回應

外獅佬

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均可正常執行：