The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.?

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    function myJsFunc() {
        alert(&quot;myJsFunc&quot;);
    }

&lt;!-- language: lang-html --&gt;

    &lt;a href=&quot;#&quot; onclick=&quot;myJsFunc();&quot;&gt;Run JavaScript Code&lt;/a&gt;

&lt;!-- end snippet --&gt;

 or

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    function myJsFunc() {
        alert(&quot;myJsFunc&quot;);
    }

&lt;!-- language: lang-html --&gt;

     &lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;myJsFunc();&quot;&gt;Run JavaScript Code&lt;/a&gt;

&lt;!-- end snippet --&gt;



Which &quot;href&quot; value should I use for JavaScript links, &quot;#&quot; or &quot;javascript:void(0)&quot;?

What is the difference between `window.location.href` and `window.open ()` methods in JavaScript?

window.location.href and window.open () methods in JavaScript

I am using Bootstrap.

Bootstrap defines 

    a:hover, a:focus {
        color: #005580;
        text-decoration: underline;
    }

I have this links / CSS-classes

    &lt;a class=&quot;green&quot; href=&quot;#&quot;&gt;green text&lt;/a&gt;
    &lt;a class=&quot;yellow&quot; href=&quot;#&quot;&gt;yellow text&lt;/a&gt;

How can I disable the hoover color?

I want the green links to stay green and the yellow ones yellow, without overriding :hover for every single class? (this question is not mandatory dependent to bootstrap).

I need something like

    a:hover, a:focus {
        color: @nonhoovercolor;
    }

and I think 

    .yellow {
        color: yellow !important;
    }

is not a good practice.

How can I disable the bootstrap hover color for links?

    import urllib2

    website = &quot;WEBSITE&quot;
    openwebsite = urllib2.urlopen(website)
    html = getwebsite.read()
    
    print html

So far so good. 

But I want only href links from the plain text HTML. How can I solve this problem? 


How can I get href links from HTML using Python?

I&#39;ve got the script below

    var els = document.getElementsByTagName(&quot;a&quot;);
    for(var i = 0, l = els.length; i &lt; l; i++) {
      var el = els[i];
      el.innerHTML = el.innerHTML.replace(/link1/gi, &#39;dead link&#39;);
    }

However this searches through the page and takes about 20 seconds to do it as there are LOTS of links.

However I only need to target the `a`&#39;s that have a specific `href`, for eg. &quot;http://domain.com/&quot;

So ideally I&#39;d like to be able to do this in a similar fashion to jQuery, but without using a framework. So something like

    var els = document.getElementsByTagName(&quot;a[href=&#39;http://domain.com&#39;]&quot;);

How would I go about doing this so it only searches the objects with that matching `href`?

Javascript getElement by href?

I&#39;m having a massive problem with AngularJS routing.

Up until recently everything has been fine with the following route:

    $routeProvider.when(&#39;/album/:albumId&#39;, {
        controller: &#39;albumPageController&#39;,
        templateUrl: &#39;views/album.html&#39;
    });

and using the href:

    &lt;a href=&quot;/#/album/{{album.id}}&quot;&gt;Link&lt;/a&gt;

However, now all of the slashes are being encoded into `%2F`.

So when I click the link, or type `localhost:8000/#/album/1` into the browser, the URL is changed to:

&gt;http://localhost:8000/#%2Falbum%2F1

I&#39;ve tried several things to correct this:

Using ng-href instead of href, 
Not using the first / (ie `href=&quot;#/album/{{album.id}}&quot;`)
Running the app in Homestead localhost (Laravel&#39;s linux vagrant machine) instead of localhost on Windows 10

Any help would be much appreciated!

AngularJS All slashes in URL changed to %2F

In the 1990s, there was a fashion to put Javascript code directly into `&lt;a&gt;` href attributes, like this:

    &lt;a href=&quot;javascript:alert(&#39;Hello world!&#39;)&quot;&gt;Press me!&lt;/a&gt;

And then suddenly I stopped to see it. They were all replaced by things like:

    &lt;a href=&quot;#&quot; onclick=&quot;alert(&#39;Hello world!&#39;)&quot;&gt;Press me!&lt;/a&gt;

For a link whose sole purpose is to trigger Javascript code, and has no real `href` target, why is it encouraged to use the `onclick` property instead of the `href` property?

Why is it bad practice to use links with the javascript: &quot;protocol&quot;?

it has always been my practice that when ever i use images i name them like
`walls_ico` , `bu_hover`

so when i give paths they go like

    &lt;img src=&quot;images/walls_ico.ico&quot; /&gt;
    &lt;img src=&quot;buttons/bu_hover.png&quot; /&gt;

UNTIL now when i am on a project where users upload files...

i was wondering is it okay to have spaces between file and folders name like

    &lt;img src=&quot;buttons/bu hover.png&quot; /&gt;


href syntax : is it okay to have space in file name

Is it possible to open an `a href` link in a new tab instead of the same tab?

    &lt;a href=&quot;http://your_url_here.html&quot;&gt;Link&lt;/a&gt;

Open link in new tab or window

What is the url structure to search for an address in Google Maps? 

I want to offer an address on my website that, when clicked, it will open google maps directly to an address from my script.

I want to create a link `&lt;a href=&quot;...&quot;&gt;&lt;/a&gt;` which will open a Google Maps browser page that shows a map of a street address from my script. 




Open Google map with specific address in a browser


The `&lt;a&gt;` tag is used to create hyperlinks but in this age of jQuery and Ajax we are using it to load HTML into `&lt;div&gt;`s in the same page as the `&lt;a&gt;` tags.

That said, we set the `href` atribute as `href=&quot;#&quot;`, using or rather abusing the `#` character as a placeholder along with some undesirable side effects like the URL getting appended with the `#` character.

And if you leave the `href` attribute blank `href = &quot;&quot;`, the link does not seem to work.

Is there anyway to do this in a cleaner way like showing some text or dummy function in the status bar of the browser when the user hovers over the link and yet make the link do what the programmer intended?

Here&#39;s my code.


    &lt;ul id=&quot;sidebarmenu1&quot;&gt;
       // List that is converted into a menu... 
       &lt;li&gt; &lt;a href=&quot;#&quot; id=&quot;loadHotel&quot; &gt; HOTEL &lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href=&quot;#&quot; id=&quot;loadCountry&quot;&gt; COUNTRY &lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href=&quot;#&quot; id=&quot;loadCity&quot;&gt; CITY &lt;/a&gt; &lt;/li&gt;
    &lt;/ul&gt;

    // The jQuery to load content into another div with Ajax
    var loadUrl = &quot;createHotel.php&quot;;
    $(&quot;#loadHotel&quot;).click(function() {
        $(&quot;#mainContent&quot;).html(ajax_load).load(loadUrl);
    }); 
    
    // ajax function to load hotel ---&gt; rooms page 
    
    var url_loadRooms = &quot;viewRooms.php&quot;;
    $(&quot;#createRooms&quot;).click(function() {
        $(&quot;#mainContent&quot;).html(ajax_load).load(url_loadRooms);
    });

What else can I use instead of `&quot;#&quot;` to make my code neat..?
 
   


Alternatives for using &quot;#&quot; in href attribute

I learned **&quot;window.location.hash&quot;** new and tried in my jquery code instead of **&quot;window.location.href&quot;** and both of them gave same results.  
  
Code is here :  

    window.location.href = ($(e.currentTarget).attr(&quot;href&quot;));
    window.location.hash = ($(e.currentTarget).attr(&quot;href&quot;));

What is the difference between them?

What is the difference between &quot;window.location.href&quot; and &quot;window.location.hash&quot;?

I am getting an error and can&#39;t find why. Here is the error:

    EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -&gt; Router -&gt; Location -&gt; LocationStrategy).
        angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -&gt; Router -&gt; Location -&gt; LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
        angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
        angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
        angular2.dev.js:23514 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
            at new BaseException (angular2.dev.js:8080)
            at new PathLocationStrategy (router.dev.js:1203)
            at angular2.dev.js:1380
            at Injector._instantiate (angular2.dev.js:11923)
            at Injector._instantiateProvider (angular2.dev.js:11859)
            at Injector._new (angular2.dev.js:11849)
            at InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11733)
            at Injector._getByKeyDefault (angular2.dev.js:12048)
            at Injector._getByKey (angular2.dev.js:12002)
            at Injector._getByDependency (angular2.dev.js:11990)

Does anyone know why the router is throwing this? I am using angular2 beta

here is my code:

&lt;!-- language-all: lang-ts --&gt;

    import {Component} from &#39;angular2/core&#39;;
    import { RouteConfig, ROUTER_DIRECTIVES } from &#39;angular2/router&#39;;
    import {LoginComponent} from &#39;./pages/login/login.component&#39;;
    import {DashboardComponent} from &#39;./pages/dashboard/dashboard.component&#39;;
    @Component({
        selector: &#39;app&#39;,
        directives:[ROUTER_DIRECTIVES],
        template:`
            &lt;div class=&quot;wrapper&quot;&gt;
                &lt;router-outlet&gt;&lt;/router-outlet&gt;
            &lt;/div&gt;`
    })
    @RouteConfig([
        { path: &#39;/&#39;,redirectTo: &#39;/dashboard&#39; },
        { path: &#39;/login&#39;,name:&#39;login&#39;,component: LoginComponent },
        { path: &#39;/dashboard&#39;,name:&#39;dashboard&#39;,component: DashboardComponent,}
    ])
    export class AppComponent {
    }
        

Angular 2 router no base href set

I&#39;m creating a navigation menu with words with different colors (`href` links). I would like the color NOT to change on any state (hover, visited etc).

I know how to set the the colors for the different states, but I would like to know the code to just leave the text color (and any other styling/formatting) as it is.

Any Suggestions?


Remove ALL styling/formatting from hyperlinks

I&#39;m trying to do something like this:
  
    &lt;div v-for=&quot;r in rentals&quot;&gt;
      &lt;a bind-href=&quot;&#39;/job/&#39;r.id&quot;&gt; {{ r.job_title }} &lt;/a&gt;
    &lt;/div&gt;  

I can&#39;t figure out how to add the value of `r.id` to the end of the `href` attribute so that I can make an API call. Any suggestions?

How to pass a value from Vue data to href?

One of our web developers uses the following html as a placeholder for styling a drop down list.

    &lt;a href=&quot;&quot; class=&quot;arrow&quot;&gt;&lt;/a&gt;

Is this considered anchor tag valid?  

Since there is no href value, it shows up as broken on some of our link checker reports.


Is an empty href valid?

I generate normal links like: `&lt;a href=&quot;/path/to/image&quot;&gt;&lt;img src=&quot;/path/to/image&quot; /&gt;&lt;/a&gt;` in a web app.

When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select &quot;save as&quot;

I don&#39;t want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?

If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?

href image link download on click

I have an anchor tag that has a local href value, and a JavaScript function that uses the href value but directs it to a slightly different place than it would normally go.  The tag looks like

    &lt;a onclick=&quot;return follow(this);&quot; href=&quot;sec/IF00.html&quot;&gt;&lt;/a&gt;

and a JavaScript function that looks like

    baseURL = &#39;http://www.someotherdomain.com/&#39;;
    function follow(item) {
        location.href = baseURL + item.href;
    }

I would expect that &lt;code&gt;item.href&lt;/code&gt; would just return a short string of &quot;sec/IF00.html&quot;, but instead it returns the full href, &quot;http&amp;#x3a;//www.thecurrentdomain.com/sec/IF00.html&quot;.  Is there a way that I can pull out just the short href as put in the anchor &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag?  Or do I lose that by natural HTML behavior?

I suppose I could use a string manipulation to do this, but it gets tricky because my local page may actually be &quot;http&amp;#x3a;//www.thecurrentdomain.com/somedir/somepath/sec/IF00.html&quot;, and my href field may or may not have a subdirectory in it (for ex &lt;code&gt;href=&quot;page.html&quot;&lt;/code&gt; vs. &lt;code&gt;href=&quot;sub/page.html&quot;&lt;/code&gt;), so I cannot always just remove every thing before the last slash.

You may wonder why I am requesting this, and it is because it will just make the page a lot cleaner.  If it is not possible to get just the short href (as put in the anchor &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag), then I could probably just insert an extra field into the tag, like &lt;code&gt;link=&quot;sec/IF00.html&quot;&lt;/code&gt;, but again, that would be a little messier.

Get local href value from anchor (a) tag

How to change the `href` attribute value of an `&lt;a/&gt;` tag through Javascript on button click ?

    &lt;script type=&quot;text/javascript&quot;&gt;
      function f1()
      {
        document.getElementById(&quot;abc&quot;).href=&quot;xyz.php&quot;; 
      }
    &lt;/script&gt;

    &lt;a href=&quot;&quot; id=&quot;abc&quot;&gt;jhg&lt;/a&gt;
    &lt;a href=&quot;&quot; id=&quot;&quot; onclick=&quot;f1()&quot;&gt;jhhghj&lt;/a&gt;


How to change href of &lt;a&gt; tag on button click through javascript

Is it possible using [jQuery](https://jquery.com/) to select all `&lt;a&gt;` links which href ends with &quot;ABC&quot;?

For example, if I want to find this link `&lt;a href=&quot;http://server/page.aspx?id=ABC&quot;&gt;`

Select &lt;a&gt; which href ends with some string

I&#39;d like to ask about HTML tag 


    &lt;a href=&quot;www.mysite.com&quot; onClick=&quot;javascript.function();&quot;&gt;Item&lt;/a&gt;

How to make this **a** tag working with **href** and **onClick**? (prefer onClick running first then href)

HTML tag &lt;a&gt; want to add both href and onclick working

I&#39;m trying to open a [URL][1] in a new tab, as opposed to a popup window.

I&#39;ve seen related questions where the responses would look something like:

    window.open(url,&#39;_blank&#39;);
    window.open(url);

But none of them worked for me, the browser still tried to open a popup window.

  [1]: https://en.wikipedia.org/wiki/URL

Open a URL in a new tab (and not a new window)

I have a question that will be found very often. The problem is that nowhere can be found an explicit solution.

I have two problems regarding anchors.

The main goal should be to get a nice clean url without any hashes in it while using anchors to jump on a page.

So the structure of the anchors is:

    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#one&quot;&gt;One&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#two&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#three&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;a name=&quot;one&quot;&gt;text 1&lt;/a&gt;
        &lt;a name=&quot;two&quot;&gt;text 2&lt;/a&gt;
        &lt;a name=&quot;three&quot; class=&quot;box&quot;&gt;text 3&lt;/a&gt;
    &lt;/div&gt;

Okay, if you will click one of the links the url will automatically change to 

&gt; www.domain.com/page#1

At the end this should be just:

&gt; www.domain.com/page

So far, so good. Now the second thing is, when you search the internet for that problem you will find `javascript` as a solution.

I have found this function:

    function jumpto(anchor){
        window.location.href = &quot;#&quot;+anchor;
    }

and calling that function with:

    &lt;a onclick=&quot;jumpto(&#39;one&#39;);&quot;&gt;One&lt;/a&gt;

what will be the same like before. It will add the hash to the url. I also added

    &lt;a onclick=&quot;jumpto(&#39;one&#39;); return false;&quot;&gt;

without success. So if there is someone who could tell me how to solve this I really would appreciate.

Thanks a lot.

anchor jumping by using javascript

I think this may not be possible, will try and explain as best as I can.
I have a page containing tabs (jquery powered), controlled by the following:

I&#39;m using this code, as provided by another user from a previous question.

    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function() {
         
         $(&#39;html, body&#39;).animate({scrollTop:0}); // this is my &quot;fix&quot;
               
            var tabContent = $(&quot;.tab_content&quot;);
            var tabs = $(&quot;#menu li&quot;);
            var hash = window.location.hash;
         tabContent.not(hash).hide();
            if(hash==&quot;&quot;) {
          $(&#39;#tab1&#39;).fadeIn();
         }
            tabs.find(&#39;[href=&#39; + hash + &#39;]&#39;).parent().addClass(&#39;active&#39;);
        
            tabs.click(function() {
                $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
                tabContent.hide();
                var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);
        
                $(activeTab).fadeIn();
               return false;
            });
        
        });
    &lt;/script&gt;

this code works great when I visit the &quot;tabs&quot; page directly.

however, I need to link to invidual tabs from other pages - so to do this, the code gets the `window.location.hash` then shows the appropiate tab.

the page doesn&#39;t &quot;jump&quot; to the anchor because of &quot;return false&quot;.

this event is only triggered on a click event however. hence, if i visit my &quot;tabs&quot; from any other page, the &quot;jump&quot; effect is triggered. To combat this I automatically scroll to teh top of the page, but I would rather this didn&#39;t happen.

is there any way to simulate &quot;return false&quot; when the page loads, preventing the anchor &quot;jump&quot; from occuring.

hope this is clear enough.

thanks




How to disable anchor &quot;jump&quot; when loading a page?

I have an anchor with _both_ `HREF` and `ONCLICK` attributes set. If clicked and Javascript is enabled, I want it to _only_ execute `ONCLICK` and ignore `HREF`. Likewise, if Javascript is disabled or unsupported, I want it to follow the `HREF` URL and ignore `ONCLICK`. Below is an example of what I&#39;m doing, which would execute the JS and follow the link concurrently (usually the JS is executed and then the page changes):

    &lt;A HREF=&quot;http://example.com/no-js-login&quot; ONCLICK=&quot;yes_js_login()&quot;&gt;Log in&lt;/A&gt;
**what&#39;s the best way to do this?**

I&#39;m hoping for a Javascript answer, but I&#39;ll accept any method as long as it works, especially if this can be done with PHP.
I&#39;ve read &quot;https://stackoverflow.com/questions/10712528/a-href-link-executes-and-redirects-page-before-javascript-onclick-function-is-ab&quot; already, but it only delays `HREF`, but doesn&#39;t completely disable it. I&#39;m also looking for something much simpler.

How can I disable HREF if onclick is executed?

There are different ways to show graphics in a page next to text.
I need to include a graphic/icon that indicates a new tab will be opened.

I know it&#39;s possible to do using at least these different methods:
- Unicode character from default fonts
- Unicode character from CSS loaded fonts
- Inline SVG
- Inline PNG

Please suggest a method to do this, and explain why or why not it&#39;s robust on different browsers and operating systems.




Most robust method for showing Icon next to text

I have this:

    &lt;li&gt;&lt;a href=&quot;/Users/Index)&quot; class=&quot;elements&quot;&gt;&lt;span&gt;Clients&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

Which works fine. But if I am already on this page or on the controller e.g. `/Users/Details` and I click on this link it redirects me to `/Users/Index`.

How can I get the correct path in the `href` regardless of my current position on the site?

ASP MVC href to a controller/view

I want to open a link in the same window and in the same tab that contains the page with the link.

When I try to open a link by using `window.open`, then it opens in new tab—not in the same tab in the same window.

Open URL in same window and in same tab

I have seen the following methods of putting JavaScript code in an `&lt;a&gt;` tag:

    function DoSomething() { ... return false; }

 1. `&lt;a href=&quot;javascript:;&quot; onClick=&quot;return DoSomething();&quot;&gt;link&lt;/a&gt;`
 2. `&lt;a href=&quot;javascript:DoSomething();&quot;&gt;link&lt;/a&gt;`
 3. `&lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;return DoSomething();&quot;&gt;link&lt;/a&gt;`
 4. `&lt;a href=&quot;#&quot; onClick=&quot;return DoSomething();&quot;&gt;link&lt;/a&gt;`

I understand the idea of trying to put a valid URL instead of just JavaScript code, just in case the user doesn&#39;t have JavaScript enabled. But for the purpose of this discussion, I need to assume JavaScript is enabled (they can&#39;t login without it).

I personally like option 2 as it allows you to see what&#39;s going to be run&amp;ndash;especially useful when debuging where there are parameters being passed to the function. I have used it quite a bit and haven&#39;t found browser issues.

I have read that people recommend 4, because it gives the user a real link to follow, but really, # isn&#39;t &quot;real&quot;. It will go absolutely no where.

Is there one that isn&#39;t support or is really bad, when you know the user has JavaScript enabled?

Related question: *[Href for JavaScript links: “#” or “javascript:void(0)”?][1]*.

  [1]: https://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0


What is the difference between the different methods of putting JavaScript code in an &lt;a&gt;?

If I use `tel:` I should write the international phone code, like that.

    &lt;a href=&quot;tel:+6494461709&quot;&gt;61709&lt;/a&gt;

So far, so good, but I can&#39;t find information on how to write a cell phone number in an &quot;international&quot; way, if there is one.

href=&quot;tel:&quot; and mobile numbers

I am trying to test my anchor tag. Once I click it, I want to see if the `window.location.href` is what I expect.

I&#39;ve tried to render the anchor, click it, and then test `window.location.href`:

```js
test(&#39;should navigate to ... when link is clicked&#39;, () =&gt; {
  const { getByText } = render(&lt;a href=&quot;https://test.com&quot;&gt;Click Me&lt;/a&gt;);

  const link = getByText(&#39;Click Me&#39;);

  fireEvent.click(link);

  expect(window.location.href).toBe(&quot;https://www.test.com/&quot;);
});
```

I am expecting the test to pass, but instead the window.location.href is just `&quot;http://localhost/&quot;` meaning it is not getting updated for whatever reason. I even tried wrapping my expect with `await wait`, but that didn&#39;t work either. I can&#39;t find much information about testing anchors with `react-testing-library`. Maybe there is even a better way to test them than what I am doing. &#129335;‍♂️

How to test anchor&#39;s href with react-testing-library

How do I test to see if links are external or internal? Please note:

 1. I cannot hard code the local domain.
 2. I cannot test for &quot;http&quot;. I could just as easily be linking to my own site with an http absolute link.
 3. I want to use jQuery / javascript, not css.

I suspect the answer lies somewhere in location.href, but the solution evades me.

Thanks!

Test if links are external with jQuery / javascript?

I have a page where I don&#39;t want the outbound links to send a referrer so the destination site doesn&#39;t know where they came from.

I&#39;m guessing this isn&#39;t possible but I just want to make sure there weren&#39;t any hidden javascript magic that could do it and that would work with some (if not most) browsers.

Maybe some clever HTTP status code redirecting kung-fu?

Something like this would be perfect

    &lt;a href=&quot;example.com&quot; send_referrer=&quot;false&quot;&gt;link&lt;/a&gt;

Stop link from sending referrer to destination

I am using this bit of jQuery code to get href of the link:

    var url = $(this).attr(&#39;href&#39;);

-- and this bit of code to go to that href:

    window.location = url;

Everything is just the way I want it, except the new page opens in the same window as the previous one, and I want it to open in a new window or tab (something that in plain html would have been achieved by using target=&quot;_blank&quot; formula). 

**Question: How can I open the href in the new window or tab with jQuery?**

Thank you for your help!

jQuery: go to URL with target=&quot;_blank&quot;

&gt; **Possible Duplicate:**  
&gt; [How to remove the underline for anchors(links)?](https://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks)  

&lt;!-- End of automatically inserted text --&gt;

In the following code below, the link gets underlined when I use the href attribute.

    &lt;html&gt;
    &lt;body&gt;
    &lt;a href=&quot;xxx.html&quot;&gt;goto this link&lt;/a&gt;
    &lt;/body&gt;
    &lt;/html&gt;

I want the link to be associated with that &lt;a&gt; tag, but not to be underlined. How can I do that? Thanks in advance for your help.

Removing underline with href attribute

I am trying to write a GreaseMonkey script in which I want to find all of the links that are relative links.  It seemed to me that the way to do that would be to match the contents of href against `/^https?:///`.

But I find that when I access the anchor&#39;s href attribute, it&#39;s always normalized or cooked into a form that contains &quot;http&quot;.  That is, if the HTML contains:

    &lt;a id=&quot;rel&quot; href=&quot;/relative/link&quot;&gt;inner&lt;/a&gt;

accessing

    document.getElementById(&quot;rel&quot;).href

returns

    http://example.com/relative/link

How can I access the raw data in the href attribute?

Alternately, is there a better way to find relative links?

How to get &quot;raw&quot; href contents in JavaScript

When I use the HTML `&lt;base&gt;` tag to define a base URL for all relative links on a page, anchor links also refer directly to the base URL. Is there a way to set the base URL that would still allow anchor links to refer to the currently open page?

For example, if I have a page at `http://example.com/foo/`:

----

Current behaviour:

    &lt;base href=&quot;http://example.com/&quot; /&gt;
    &lt;a href=&quot;bar/&quot;&gt;bar&lt;/a&gt; &lt;!-- Links to &quot;http://example.com/bar/&quot; --&gt;
    &lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt; &lt;!-- Links to &quot;http://example.com/#baz&quot; --&gt;

Desired behaviour:

    &lt;base href=&quot;http://example.com/&quot; /&gt;
    &lt;a href=&quot;bar/&quot;&gt;bar&lt;/a&gt; &lt;!-- Links to &quot;http://example.com/bar/&quot; --&gt;
    &lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt; &lt;!-- Links to &quot;http://example.com/foo/#baz&quot; --&gt;




Make anchor links refer to the current page when using &lt;base&gt;

I have a page with some jQuery functions. The HTML on the page looks like so: 

    &lt;a href=&quot;#&quot; class=&quot;service&quot;&gt;Open&lt;/a&gt;

When I click the Open button a hidden panel slides out. The jQuery itself works great however when I click the button it also takes me to the top of the page. 

Is this the defualt behavior and how do I prevent every `href=&quot;#&quot;` from taking me to the top of the page. 

Note: I could add id&#39;s and tell the href to direct to that ID. I do not want to do that for various reasons (including adding unnecessary code).

href=&quot;#&quot; Going to Top of Page - Prevent?

    &lt;a id=&quot;a$id&quot; onclick=&quot;check($id,1)&quot; href=&quot;javascript:void(0)&quot;  class=&quot;black&quot;&gt;Qualify&lt;/a&gt;

After &quot;href&quot; is removed, is &quot;Qualify&quot; still clickable?

How to remove &quot;href&quot; with Jquery?

Say I have an anchor somewhere on a different page:

    &lt;A NAME=&quot;blah&quot;&gt;


On the page I&#39;m currently on, I want to go that that anchor on that different page while also passing a GET parameter, such as, for example:

    &lt;A HREF=&quot;otherpage.htm#blah?data=1234&quot;&gt;Good Stuff!&lt;/A&gt;

This doesn&#39;t seem to be working for me.  It loads the page and passes the variable but doesn&#39;t go to the anchor.  I&#39;ve searched for examples on the anchor tag, and there&#39;s tons of them, but nobody talks about jumping to an anchor in a page while also passing parameters in the URL.

All Href Solutions on Gang of Coders

Total of 40 Href Solutions