使用純css禁用html中a標(biāo)簽無(wú)需javascript
來(lái)源:易賢網(wǎng) 閱讀:559 次 日期:2014-10-21 15:24:57
溫馨提示:易賢網(wǎng)小編為您整理了“使用純css禁用html中a標(biāo)簽無(wú)需javascript”,方便廣大網(wǎng)友查閱!

其實(shí)這個(gè)問(wèn)題在初次學(xué)習(xí)html中select標(biāo)簽時(shí)就已經(jīng)冒出來(lái)了,時(shí)至今日,依然沒(méi)有找到使用純css禁用a標(biāo)簽的辦法——同事、同學(xué)、老師我都問(wèn)過(guò)了,他們都千篇一律借助了javascript,難道真的必須要借助javascript嗎?

1、純css實(shí)現(xiàn)html中a標(biāo)簽的禁用:

代碼如下:

<html>

<head>

<title>如何禁用a標(biāo)簽</title>

<metacontent=text/html; charset=gb2312http-equiv=content-type>

<style type=text/css>

body{

font:12px/1.5 \5b8b\4f53, georgia, times new roman, serif, arial;

}

a{

text-decoration:none;

outline:0 none;

}

.disablecss{

pointer-events:none;

color:#afafaf;

cursor:default

}

</style>

</head>

<body>

<aclass=disablecss href=http://www.baidu.com/>百度</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<aclass=disablecss href=#onclick=javascript:alert('你好?。?!');>點(diǎn)擊</a>

</body>

</html>

上面雖然使用純css實(shí)現(xiàn)了對(duì)a標(biāo)簽的禁用,不過(guò)由于opera、ie瀏覽器不支持pointer-events樣式,所以上面代碼在這兩類瀏覽器中起不到禁用a標(biāo)簽的作用。

2、借助jquery和css實(shí)現(xiàn)html中a標(biāo)簽的禁用:

代碼如下:

<html>

<head>

<title>02 ——借助jquery和css實(shí)現(xiàn)html中a標(biāo)簽的禁用</title>

<meta content=text/html; charset=gb2312 http-equiv=content-type>

<script type=text/javascript src=./jquery-1.6.2.js></script>

<script type=text/javascript>

$(function() {

$('.disablecss').removeattr('href');//去掉a標(biāo)簽中的href屬性

$('.disablecss').removeattr('onclick');//去掉a標(biāo)簽中的onclick事件

});

</script>

<style type=text/css>

body {

font: 12px/1.5 \5b8b\4f53, georgia, times new roman, serif, arial;

}

a {

text-decoration: none;

outline: 0 none;

}

.disablecss {

color: #afafaf;

cursor: default

}

</style>

</head>

<body>

<a class=disablecss href=http://www.baidu.com/>百度</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a class=disablecss href=# onclick=javascript:alert('你好?。?!');>點(diǎn)擊</a>

</body>

</html>

這種方式可以兼容所有瀏覽器,可是混用了javascript,這一點(diǎn)恐怕是致命的缺憾?。?!

3、借助jquery實(shí)現(xiàn)html中a標(biāo)簽的禁用:

代碼如下:

<html>

<head>

<title>03 ——借助jquery實(shí)現(xiàn)html中a標(biāo)簽的禁用</title>

<meta content=text/html; charset=gb2312 http-equiv=content-type>

<script type=text/javascript src=./jquery-1.6.2.js></script>

<script type=text/javascript>

$(function() {

$('.disablecss').removeattr('href');//去掉a標(biāo)簽中的href屬性

$('.disablecss').removeattr('onclick');//去掉a標(biāo)簽中的onclick事件

$(.disablecss).css(font,12px/1.5 \\5b8b\\4f53, georgia, times new roman, serif, arial);

$(.disablecss).css(text-decoration,none);

$(.disablecss).css(color,#afafaf);

$(.disablecss).css(outline,0 none);

$(.disablecss).css(cursor,default);

});

</script>

</head>

<body>

<a class=disablecss href=http://www.baidu.com/>百度</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a class=disablecss href=# onclick=javascript:alert('你好?。?!');>點(diǎn)擊</a>

</body>

</html>

上面使用了純jquery實(shí)現(xiàn)了禁用html中a標(biāo)簽的功能。

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:使用純css禁用html中a標(biāo)簽無(wú)需javascript
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)