台灣最大程式設計社群網站
線上人數
690
 
會員總數:245214
討論主題:189087
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> JS下拉式選單(無須任何檔案)
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
JS下拉式選單(無須任何檔案)
價值 : 0 QP  點閱數:11714 回應數:0

樓主

站務人員 站長
門外漢
0 1580
542 9
發送站內信

捐贈 VP 給 站務人員
JS簡單目錄

<style>

TD.list

{

Font-family: verdana;

COLOR: #000000;

TEXT-DECORATION: none

}

TD.list A:link

{

Font-family: verdana;

COLOR: #0000ff;

TEXT-DECORATION: none

}

TD.list A:active

{

Font-family: verdana;

COLOR: #ff000;

TEXT-DECORATION: none

}

TD.list A:visited

{

Font-family: verdana;

COLOR: #800080;

TEXT-DECORATION: none

}

TD.list A:hover

{

Font-family: verdana;

COLOR: #ff3300;

TEXT-DECORATION: none

}

td { font-size: 10pt}

</style>

<SCRIPT LANGUAGE=javascript>

<!--


file://No of MenuItems

constMaxItem=3


function fnDispThis(active)

{

for (i=1; i < constMaxItem+1; i++)

{

if (i!=active)

{

document.all("sub"+i).style.display="NONE"

}

else

{

document.all("sub"+active).style.display="BLOCK"

}

}

}

file://-->

</SCRIPT>


</head>

<body>

<table BORDER="0" CELLSPACING="0" CELLPADDING="0" align=left>

<tr>

<td class="list" onclick="fnDispThis(1)" style="Cursor:HAND;">第一標題<br>

<DIV id="sub1" style="Display:'NONE';">

   <A href="連結網頁.htm" target=basefrm>選項1</a><br>

   <A href="連結網頁.htm" target=basefrm>選項2</a><br>

   <A href="連結網頁.htm" target=basefrm>選項3</a><br></td>

</DIV>

</tr>

<tr>

<td class="list" onclick="fnDispThis(2)" style="Cursor:HAND;">第二標題<br>

<DIV id="sub2" style="Display:'NONE';">

   <A href="連結網頁.htm" target=basefrm>選項1</a><br>

   <A href="連結網頁.htm" target=basefrm>選項2</a><br>

   <A href="連結網頁.htm" target=basefrm>選項3</a><br></td>

</DIV>

</tr>

<tr>

<td class="list" onclick="fnDispThis(3)" style="Cursor:HAND;">第三標題<br>

<DIV id="sub3" style="Display:'NONE';">

   <A href="連結網頁.htm" target=basefrm>選項1</a><br>

   <A href="http://連結網址" target=basefrm>選項2</a><br>

   <A href="連結網頁" target=basefrm>選項3</a><br></td>

</DIV>

</tr>

</table>

安裝說明:
<SCRIPT LANGUAGE=javascript>

<!--

file://No of MenuItems

constMaxItem=3

此處的 3 表示主目錄只有三項,在本也範例中,主目錄分別是 第一標題, 第二標題, 第三標題.

將 <table> 下的連結語法以你的 HTML 功力修改成配合你的網站使用<td class="list" onclick="fnDispThis(1)" style="Cursor:HAND;">

中 style="Cursor:HAND; 將滑鼠指標改成手掌形,也可以改成其它形狀

配合上 <style> 的運用,將連結文字做無底線或是 hoover.

可運用在單一網頁或是框架網頁 (frame),使用彈性很大

唯一的問題是效果只在 IE 出現, Netscape 則將選單一次出現所有.


本篇文章發表於2000-08-02 00:00
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.