樓主

站務人員
站長

發送站內信

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