討論區快速選單
知識庫快速選單
政府補助!學嵌入式+物聯網 網路投保旅行平安險 傑米的攝影旅遊筆記
[ 回上頁 ] [ 討論區發言規則 ]
如何在按下每個連結後讓背景變色?
更改我的閱讀文章字型大小
作者 : michael_chan(maiko)
[ 貼文 18 | 人氣 0 | 評價 0 | 評價/貼文 0 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/20 下午 08:38:33
因為使用的是<!--#include file="menu.asp"-->方法,所以在上面的一行導覽區會不變,能夠做到mouseover和 mouseout,可是要做成在按下每個的連結後,該<li></li>的背景色會變色,讓人知道它是在連結的當前頁?謝謝!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title></title>
<style>
div#menu {
height:35px;
background: #FFFFFF url(images/menu.png);
}

div#menu ul {
padding:0;
list-style-type:none;
margin:0 0 0 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div#menu ul li {
float:left;
display:inline;
padding:0 7px;
margin:0;
}
div#menu ul li a {
display:block;
float:left;
font-weight:bold;
padding:0px 15px 0 15px;
height: 35px;
color: #999;
text-decoration:none;
border:none;
line-height: 25px;
}
div#menu ul li a:hover {
text-decoration:underline;
color: #fff;
background: blue;
}
div#menu ul li a.current {
position:relative; /* for IE6 */
color:#fff;
margin-top:0px;
padding-top:0px;
height: 35px;
border-bottom:none;
line-height: 25px;
background: blue;
}
</style>
</head>

<body>

<div id="menu">
<ul>
<li><a href="index.asp" title="首頁">首頁</a></li>
<li><a href="products.asp" title="About us">產品</a></li>
<li><a href="support.asp" title="Support">技術支援</a></li>
<li><a href="aboutus.asp" title="About us">關於我</a></li>
<li><a href="connectus.asp" title="Contact us">聯絡我們</a></li>
</ul>
</div>

</body>
</html>
作者 : jawa560(Snaking) Java Script優秀好手貼文超過1000則人氣指數超過30000點
[ 貼文 1154 | 人氣 32593 | 評價 4630 | 評價/貼文 4.01 | 送出評價 168 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/21 下午 06:33:53
不知你是根據哪裡引用的語法, 因為 css 並無 a.current 這個屬性.
據我所知,光靠 css 應該做不到這點,不然 Photoshop 的 ImageReady 早就可以加入這語法了!

若不改你的css, 請參考以下寫法,加入ASP 語句:

<%
script_name= Request.ServerVariables("SCRIPT_NAME")
tmp_arr=split(script_name,"/")
script_name=tmp_arr(ubound(tmp_arr))
function who_is_current(scr_name)
end function
%>
<body>
<div id="menu">
<ul>
<li><a <% if script_name="index.asp" then response.write "class='current'" %> href="index.asp" title="首頁">首頁</a></li>
<li><a <% if script_name="products" then response.write "class='current'" %> href="products.asp" title="About us">產品</a></li>
<li><a <% if script_name="support.asp" then response.write "class='current'" %> href="support.asp" title="Support">技術支援</a></li>
<li><a <% if script_name="aboutus.asp" then response.write "class='current'" %> href="aboutus.asp" title="About us">關於我</a></li>
<li><a <% if script_name="connectus.asp" then response.write "class='current'" %> href="connectus.asp" title="Contact us">聯絡我們</a></li>
</ul>

</div>

</body>
</html>
作者 : jawa560(Snaking) Java Script優秀好手貼文超過1000則人氣指數超過30000點
[ 貼文 1154 | 人氣 32593 | 評價 4630 | 評價/貼文 4.01 | 送出評價 168 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/21 下午 06:35:31
Sorry,上面
function who_is_current(scr_name)
end function
這兩行請刪除
作者 : jawa560(Snaking) Java Script優秀好手貼文超過1000則人氣指數超過30000點
[ 貼文 1154 | 人氣 32593 | 評價 4630 | 評價/貼文 4.01 | 送出評價 168 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/21 下午 06:41:14
剛剛查了一下,如下範例,也是用程式來產生 class='current' 這段文字,所以你應該是忽略了程式碼存在的必要性.
http://www.finalwebsites.com/tutorials/css-navigation-bar.php

補充:上面我範例又漏打了, if script_name="products" 應該是 if script_name="products.asp"
作者 : michael_chan(maiko)
[ 貼文 18 | 人氣 0 | 評價 0 | 評價/貼文 0 | 送出評價 0 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/21 下午 08:31:46
Sorry,我引用大大的代碼,可是沒有效果,不知道還要改進哪裡?謝謝!
作者 : jawa560(Snaking) Java Script優秀好手貼文超過1000則人氣指數超過30000點
[ 貼文 1154 | 人氣 32593 | 評價 4630 | 評價/貼文 4.01 | 送出評價 168 次 ] 
[ 給個讚 ]  [ 給個讚 ]  [ 回應本文 ]  [ 發表新文 ]  [ 回上頁 ] [ 回討論區列表 ] [ 回知識入口 ]
2010/3/22 上午 11:48:39
請告知您的瀏覽器版本,並將 menu.asp 產生的 html 原始檔貼上來看看!
我用 IE6 ,FF 跟 chrome 都是 OK 的!

再確定一下 style 裡宣告的是 a.current ? 沒動到什麼?
 板主 : Clark
 > HTML/DHTML - 討論區
 - 最近熱門問答精華集
 - 全部歷史問答精華集
 - HTML/DHTML - 知識庫
  ■ 全站最新Post列表
  ■ 我的文章收藏
  ■ 我最愛的作者
  ■ 全站文章收藏排行榜
  ■ 全站最愛作者排行榜
  ■  月熱門主題
  ■  季熱門主題
  ■  熱門主題Top 20
  ■  本區Post排行榜
  ■  本區評價排行榜
  ■  全站專家名人榜
  ■  全站Post排行榜
  ■  全站評價排行榜
  ■  全站人氣排行榜
 請輸入關鍵字 
  開始搜尋
 
Top 10
評價排行
HTML/DHTML
1 BK. 220 
2 小P 210 
3 玩家 170 
4 foolface 130 
5 羅蘋 130 
6 阿戊 120 
7 nick 100 
8 EllyChen 80 
9 picard 70 
10 rt-55 70 
HTML/DHTML
  專家等級 評價  
  一代宗師 10000  
  曠世奇才 5000  
  頂尖高手 3000  
  卓越專家 1500  
  優秀好手 750  
Microsoft Internet Explorer 6.0. Screen 1024x768 pixel. High Color (16 bit).
2000-2019 程式設計俱樂部 http://www.programmer-club.com.tw/
0.03125