`

去除<a> 标签虚线

IEFirefoxjQuery浏览器 
阅读更多
去除<a> 标签虚线
其实之前已用了 outline:medium none;语句来去除站内<a> 标签的链接虚线。但这个方法在IE浏览器下基本上不支持。无奈，又试了一些其它方法。

方法 1

步骤： 在<a> 标签中加入onFocus="this.blur()"语句。
例如<a href="#" onFocus="this.blur()">IconCastle</a>
适配： IE6 IE7 IE8 Firefox
缺点： 这段语句只能加在<a> 标签内，所以需要一个一个单独添加。比较麻烦。另外，加了这段语句以后，似乎a:active样式在IE（6，7，8）浏览器下不支持了。


方法 2

如果链接过多，可以通过调用外部blur.js来实现全站<a> 标签去虚线化。
步骤： 首先，建一个名称为blur.js的文件，将如下语句写进文件中
$(document).ready(function() {
$("a").bind("focus",function(){this.blur()});
});
然后在<head>标签内内调用该文件即可。
前提： 需要有一个jquery.js文件。我用的是jquery1.2.3(很老的版本了)，该版本下测试OK。其它版本没有测试过。
例如
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="blur.js" type="text/javascript" charset="utf-8"></script>
适配： IE6 IE7 IE8 Firefox
缺点： 同样，a:active样式在IE（6，7，8）浏览器下不支持了。

接着研究，唉～

分享到：
| jquery选择框后面的标签内容
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css实现a“标签点击无虚线.rar

    然而，默认情况下，当鼠标悬停在`&lt;a&gt;`标签上时，浏览器可能会显示一条虚线边框，这在某些设计风格中可能并不符合预期。本教程将深入讲解如何通过CSS来消除`&lt;a&gt;`标签在点击时出现的虚线边框。 首先，我们需要理解`&lt;a...

    如何去掉图片热点链接或超链接的虚线框？.rar

    更推荐的方法是在全局CSS文件或者`&lt;style&gt;`标签内定义类选择器，然后将该类应用到需要去除边框的`&lt;a&gt;`标签上。例如： ```css .no-border { border: none; outline: none; } ``` 然后在HTML中使用这个类： ```html ...

    CSS标签切换代码实例教程 比较漂亮.

    - **去除虚线**：可以通过CSS取消链接的下划线，如`a {text-decoration: none;}`。 - **过渡动画**：可以添加CSS3的过渡效果，如`transition`，让内容切换更平滑。 - **响应式设计**：确保标签切换在不同屏幕尺寸下...

    javascript经典特效---去掉图片链接周围虚线.rar

    这段代码遍历所有`&lt;a&gt;`标签，如果它们包含图片，就会移除虚线边框。 2. **使用事件监听：** 如果只想在特定情况下移除边框，可以监听用户的交互事件，如鼠标悬停(`mouseover`)或点击(`click`)。以下是一个例子： ...

    去掉超链接的虚线框

    将此属性添加到`&lt;a&gt;`标签中，可以有效地隐藏超链接的虚线框。 ```html &lt;a hideFocus="true" style="outline: none;"&gt;链接文本&lt;/a&gt; ``` 此外，也可以使用`onFocus`事件配合`blur()`函数，强制移除焦点，从而避免...

    html页面中常用的一些小方法整理

    6. **消除链接虚线边框**：在图片链接上设置`onFocus="this.blur()"`可去除点击后的虚线边框，如：`&lt;a href="#" onFocus="this.blur()"&gt;&lt;img src="logo.jpg" border=0&gt;&lt;/a&gt;`。 7. **电子邮件表单提交**：创建一个...

    去掉a标签超链接的虚线框的方法

    去掉a标签超链接的虚线框的方法 在网页设计中，a标签超链接的虚线框是非常常见的，但有时我们需要去掉这种虚线框以提高用户体验。今天，我们将讨论如何去掉a标签超链接的虚线框。 一、使用outline属性 在Firefox中...

    鼠标指向网页图片时图片周围显示虚线框

    3. `#outer img`: 这个选择器用于设置`&lt;img&gt;`图片元素的样式，包括去除默认边框、设置图片为块级元素（使得图片占据整个`&lt;a&gt;`标签的宽度）以及设置背景色。 这段代码的完整运行效果是：当用户将鼠标悬停在图片上时...

    Html网页代码常用小技巧总结续,网页制作学习.docx

    3. **去除图片链接虚线**：在图片链接中添加 `onFocus="this.blur()"` 可以消除鼠标点击后的虚线边框：`&lt;a href="#" onFocus="this.blur()"&gt;&lt;img src="logo.jpg" border=0&gt;&lt;/a&gt;`。 4. **电子邮件表单提交**：创建一...

    去除链接虚线全面分析总结

    传统办法，在标签内加属性 代码多，修改难&lt;a&gt;link1&lt;/a&gt; &lt;a&gt;link1&lt;/a&gt; &lt;a&gt;link1&lt;/a&gt; &lt;a&gt;link1&lt;/a&gt; &lt;a&gt;link1&lt;/a&gt; 非标准 中级办法，全局控制　CSS实现 增加IE负担，不推荐使用 a{

    CSS去掉A标签（链接）虚线框的方法

    在网页设计中，超链接（通常使用A标签表示）在获得焦点时，默认浏览器会给它加上一个虚线框，这在某些设计风格中显得不协调。例如，在使用CSS来设计美观的按钮或图标时，这个默认的虚线框就显得非常突兀，破坏了整体...

    如何去掉图片热点链接或超链接的虚线框？特效代码

    链接是HTML中&lt;a&gt;标签创建的，用于在页面之间跳转或者执行其他动作。而热点则是针对图片的，它允许我们将图片的某一部分定义为链接区域，点击该区域可以导航到其他页面。在网页中，图片热点通常与&lt;a&gt;标签结合使用，...

    最常见web前端开发面试题（二）

    `&lt;label&gt;`标签的`for`属性与`&lt;input&gt;`标签的`id`属性相匹配，点击`&lt;label&gt;`中的文本可以聚焦对应的输入元素，例如多选框。 6. **以图换字**： 这是一种优化技巧，通过设置字体大小和行高为0并用`overflow:hidden`...

    级联样式文件共通样式整理

    这些规则去除了 `&lt;blockquote&gt;` 和 `&lt;q&gt;` 标签中可能出现的默认引号。 ##### 链接样式 ```css a{text-decoration:none;cursor:pointer;blr:expression(this.onFocus=this.blur())} ``` - 链接文本装饰设置为无，...

    去掉点击链接时出现的虚线.rar

    在HTML中，`&lt;a&gt;`标签用于创建超链接，当用户鼠标悬浮或点击链接时，浏览器会根据其默认样式添加边框。要移除这个虚线边框，我们可以采用CSS（Cascading Style Sheets）进行样式定义。以下是一种常见的解决方法： ``...

    基于html和CSS3制作简单侧边导航栏

    - &lt;a&gt;&lt;/a&gt;: 锚点标签用于创建超链接，通常链接到导航栏内不同的页面或功能区域。 2. CSS样式 - .sidebar类样式 - border-right: 1px solid #f0f2f1;: 给sidebar容器右侧添加了一条1像素宽的实线边框，颜色为#f0f...

    去掉a标签和按钮加背景图片虚线/阴影完美解决方案

    // 使用示例：移除所有a标签的虚线边框 fHideFocus("A"); ``` 这里的`hideFocus`属性是IE特有的一种方式，其他浏览器可能不支持。因此，为了兼容性，使用`onfocus`事件更为可靠。 通过以上的方法，我们可以有效地...

    新手必须掌握的经典js功能

    &lt;a href=”#” onfocus=”this.blur()”&gt;&lt;img src=”logo.jpg” border=’0’&gt;&lt;/a&gt; ``` 9. **刷新父窗口**： 在子窗口中，可以使用`Window.opener.location.reload();`来刷新父窗口的页面。 10. **设定子窗口...

    使用CSS去掉超链接的虚线边框的方法

    在网页设计中，超链接（`&lt;a&gt;`标签）和其他交互元素如输入框（`&lt;input&gt;`）和按钮（`&lt;button&gt;`）在被点击时，可能会显示一个虚线边框，这是浏览器为了帮助用户识别当前焦点所在位置而提供的默认行为。特别是对于使用...

Magicbox
Global site tag (gtag.js) - Google Analytics