Multiple methods to remove link dashed boxes in CSS and JS

Multiple methods to remove link dashed boxes in CSS and JS

When we click the link, a dotted box is displayed around the link. How can we remove the dotted box? In fact, there are a lot of methods, you can use CSS, but using javaScript seems to be a good way.

1. the CSS method removes the link dashed box:
In IE, the html attribute hideFoucs is used. Add the hidefocus = "true" attribute to the HTML Tag. However, this attribute is private to IE and is not recognized by Firefox. Front-end framework example

. Code

1. Added the hidefocus attribute.

   CSS processing in IE:

   . Code
   1. A {noOutline: expression (this. onFocus = this. blur ();}/* "onFocus" case sensitive */

      Firefox's processing method is quite standard. You only need to set a: focus {outline: none} in the CSS style code. Next, let's take a look at the uniform processing methods in MSIE and FF:

      . Code
      1. A {
      2. Outline: none;/* FF */
      3. NoOutline: expression (this. onFocus = this. blur ();/* IE */
      4. }

         For performance optimization considerations, refer to the following code:

         . Code
         1. A {outline: none ;}
         2. A: active {noOutline: expression (this. onFocus = this. blur ());}
         3. : Focus {outline: 0 ;}

            2. Use js to solve the link dotted box: front-end framework example

            . Code
            1. <Script language = "javascript">
            2. $ ("A"). bind ("focus", function (){
            3. If (this. blur ){
            4. This. blur ();
            5. }
            6. });
            7. </Script>