開關效果不只可以用在選單也可以放圖

下載JS檔 放置於網頁目錄下

<HEAD>與</HEAD>之間

<script type="text/javascript" src="switchmenu.js"></script>
<style type="text/css">
<!--
.menutitle{
cursor:pointer;
margin-bottom: 2px;
padding: 2px;
color:#000;
width:120px;
text-align:center;
background:#efefef;
border-right: #999 1px solid;
border-bottom: #999 1px solid;
}
.submenu{
display: none;
margin-left: 10px;
margin-bottom: 5px;
}
-->
</style>

<BODY>與</BODY>之間

<div id="maindiv">
<div onclick="switchmenu('sub1')">menu1</div>
<span id="sub1">
- <a href="#">text-1</a> <br />
- <a href="#">text-2</a>
</span>
<div onclick="switchmenu('sub2')">menu2</div>
<span id="sub2">
- <a href="#">text-1</a> <br />
</span>
<div onclick="switchmenu('sub3')">menu3</div>
<span id="sub3">
- <a href="#">text-1</a> <br />
</span>
</div>

 

開關效果第二運用範例(需同上下載js檔案)

同樣的程式只是換個位置和改變CSS就能做出不同的效果

<HEAD>與</HEAD>之間

<script type="text/javascript" src="switchmenu.js"></script>
<style type="text/css">
<!--
.menutitle{
cursor:pointer;
padding: 5px;
color:#000;
background:#efefef;
text-align:center;
border: #999 1px solid;
}
.submenu{
margin-top: 5px;
padding: 5px;
border: #ccc 1px solid;
width: 300px;
height: 100px;
display: none;
}
-->
</style>

<BODY>與</BODY>之間

<div id="maindiv">
<span onclick="switchmenu('sub1')">01</span>
<span onclick="switchmenu('sub2')">02</span>
<span onclick="switchmenu('sub3')">03</span>
<span id="sub1">
text-01
</span>
<span id="sub2">
text-02
</span>
<span id="sub3">
text-03
</span>
</div>

 


✦每個選項以 1234.... 排列設定,如藍色部分 :
<div onclick="switchmenu('sub1')">menu1</div>
<span id="sub1">
✦圖片替代文字可以寫為:
<img src="xx.gif" onclick="switchmenu('sub1')" alt="Image" />

 

創作者介紹
創作者 Bonnie✦ 的頭像
Bonnie✦

Bonnie ✦ 美國代買、代購

Bonnie✦ 發表在 痞客邦 留言(0) 人氣()