事实上这个问题在初次学习html中select标签时就已经冒出来了，时至今日，依旧没有找到使用纯css禁用a标签的办法——同事、同学、老师我都问过了，他们都千篇一律借助了JavaScript，难道真的必需要借助JavaScript吗？

1、纯css实现html中a标签的禁用：

<html>

<head>

<title>怎样禁用a标签</title>

<metacontent="text/html; charset=GB2312"http-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('你好！！！');">点击</a>

</body>

</html>

上面尽管使用纯css实现了对a标签的禁用，只是因为opera、ie浏览器不支持pointer-events样式，所以上面代码在这两类浏览器中起不到禁用a标签的作用。

2、借助Jquery和css实现html中a标签的禁用：

<html>

                      <head>

                                 <title>02 ——借助Jquery和css实现html中a标签的禁用</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标签中的href属性

                                                       $('.disableCss').removeAttr('onclick');//去掉a标签中的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('你好！！！');">点击</a>

                 </body>

         </html>

这样的方式能够兼容全部浏览器，但是混用了JavaScript，这一点恐怕是致命的缺憾！！！

3、借助Jquery实现html中a标签的禁用：

<html>

                   <head>

                               <title>03 ——借助Jquery实现html中a标签的禁用</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标签中的href属性

                                                         $('.disableCss').removeAttr('onclick');//去掉a标签中的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('你好！！！');">点击</a>

                    </body>

        </html>

上面使用了纯Jquery实现了禁用html中a标签的功能。

【0分demo下载】

关于禁用html中a标签的思考的更多相关文章

  1. 对HTML中P标签的思考

    这几天在用VUE-CLI做一个demo,然后在渲染一个列表的时候遇到了一个挺不可思议的事情: <!--这只是一小部分,v-for的内容在上方--> <div class=" ...

  2. js倒计时函数和(js禁用和恢复a标签的操作)

    <script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...

  3. 测试开发之Django——No6.Django模板中的标签语言

    模板中的标签语言 1.if/else {% if  %} 标签检查(evaluate)一个变量,如果这个变量为真(即:变量存在,非空,不是布尔值假),系统会显示在{% if  %} 和 {% endi ...

  4. vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...

  5. html中各种标签和属性（最基础的基本都有）

    1.标题标签: h1~h6  ctrl+1~6 2.段落标签: p      ctrl+shift+p 3.换行标签: br     shift+回车 4.水平线:   hr 5.加粗标签: stro ...

  6. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  7. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  8. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  9. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

随机推荐

  1. 字典dict常用方法

    字典是列表中常用的方法,我们经常处理字典,字典嵌套,很多复杂的操作都来自于基础,只是改变了样式而已,本质是不变的.下面来看看字典中常用的功能都有那些:     1.clear(self) def cl ...

  2. 保存最后N个元素

    cookbook系列 问题:对要搜索的值的最后几项做个有限的历史记录. 方案: #coding=utf- from collections import deque def search(lines, ...

  3. PHP 中文乱码解决方式

    1.PHP代码在PHP Storm中乱码,设置PHP Storm的默认文件编码格式为UTF-8: 文件->设置->编辑器->文件编码->将所有默认编码调整为UTF-8: 2.对 ...

  4. es6的set和get实现数据双向绑定，监听变量变化。

    直接上代码吧,这个用法真的是效仿了.net的枚举. vue的数据双向绑定就是用这个实现的. 代码: html: <input type="text" id="inp ...

  5. Codeforces Round #292 (Div. 1) C - Drazil and Park

    C - Drazil and Park 每个点有两个值Li 和 Bi,求Li + Rj (i < j) 的最大值,这个可以用线段树巧妙的维护.. #include<bits/stdc++. ...

  6. CentOS 7中以runfile形式安装CUDA 9.0

    GPU: NVIDIA Tesla K40C Enter the 'root' mode: $ su - 1. Pre-installation 1.1 Verify you have a CUDA- ...

  7. php获取当前域名、主机、URL、端口、参数、网址、路径、代理等【转】

    <?php //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<br />"; //获取网页地址 echo $_SERVER['PH ...

  8. [NOI2009]诗人小G --- DP + 决策单调性

    [NOI2009]诗人小G 题目描述: 小G是一个出色的诗人,经常作诗自娱自乐. 但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并 ...

  9. 【20181030T1】排列树【树形结构+组合数】

    题面 [正解] 一眼找规律 --**这东西有啥规律啊 哎好像根节点是最小的 好像可以组合数分配子树大小,子树内部-- 可以递归啊! 乱搞一顿就好啦 过了大样例 复杂度\(O(N)\) 切完T2后T3水 ...

  10. 【最小路径覆盖】BZOJ2150-部落战争

    [题目大意] 给出一张图,'*'表示不能走的障碍.已知每只军队可以按照r*c的方向行军,且军队与军队之间路径不能交叉.问占据全部'.'最少要多少支军队? [思路] 首先注意题意中有说“军队只能往下走” ...