Develop Reference

href # is not appending to end of URL

href # is not appending to end of URL
I have written the html page on which one of the anchor tag has href "#". Whenever I am clicking on it, # is not appending at the end of URL path in browser. Same functionality is working in different websites. Please suggest..
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-location-pin"></i>
</a>
</li>
My current url is "http://localhost:8080/add/AddDocument.html"
After clicking on the link i should get "http://localhost:8080/add/AddDocument.html#"
But i am getting this "http://localhost:8080/add/#"

This issue is solved.
There is <base href=”/”> tag present in my html which was loading alternative html link while clicking on href="#".
Thanks for all your help.

Usually, it is to link to part of a page ('#about'). If it is just there instead of being empty('#' vs. ''), it prevents the page from being reloaded on click.
Normally, you define it like this:
<div id="about"></a>
In order for your href to have a clickable link ie a web address, by placing the hashtag symbol, you refer the element (image,text, video etc) as a href if the website link is either not yet available or if it’s in the same page you can use the hashtag followed by the id name.
Also please check your routing.

ng-href not responding other than updating link or addressbar when i clieck on it (Angular Js)

I've ng-href which replace values in href that will be ok but when i click on the link, It change url on address bar which is working correct to but doesn't process to execute that URL.
What's blocking url to process? I've taken off ng-click method off from the link as well.
<li id="tst_productList_categoryLeftNav_categoryFacet_{{categoryFacet.categoryId}}" ng-repeat="categoryFacet in vm.products.categoryFacets | orderBy : 'shortDescription'"
ng-class="{'f-selected' : categoryFacet.selected}">
<a href="javascript:;" ng-href="/search?categoryId={{categoryFacet.categoryId}}&filters={{vm.filters}}&sortby={{vm.sortBy}}&page={{vm.page}}&pageSize={{vm.pageSize}}&criteria={{vm.criteria}}&view={{vm.view}}&columns={{vm.columns}}">
<span class="f-name">{{categoryFacet.shortDescription}}</span>
<span class="f-count">({{categoryFacet.count}})</span>
</a>
</li>
what's blocking link?

ng-href directive internally creates href attribute. Try removing the href attribute that you have added manually.

Try to add target="_self"
to <a> element
<a target="_self" ng-href="/search?categoryId={{categoryFacet.categoryId}}&filters={{vm.filters}}&sortby={{vm.sortBy}}&page={{vm.page}}&pageSize={{vm.pageSize}}&criteria={{vm.criteria}}&view={{vm.view}}&columns={{vm.columns}}">

How to remove a link with jQuery or JavaScript?

I hope to remove the link "ContactUs.aspx" of the following code, I use the code $("#Main4").contents().unwrap(); it worked, but the class "LeftMainMenu" is removed also.
I hope to remove only the link, how can I do this?
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>

<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
This will remove the href attribute:
$("#Main4").removeAttr("href")
Remember to do it on page load event like below:
$(function() {
$("#Main4").removeAttr("href")
});
Or if you just want to remove the value of href then
$("#Main4").attr("href", "")
This will make
<a id="Main4" class="LeftMainMenu" href="">Contact Us</a>
DEMO:
$(function() {
$("#Main4").removeAttr("href")
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>

Your jQuery selector is wrong. Should be $("#Main4"). You can use .removeAttr() to remove the attribute of href. See the documentation here.
$("#Main4").removeAttr('href');

To remove the href you can use
$('#Main4').removeAttr('href');
To remove only the link you can use
$('#Main4').attr('href','');

if you want the link hidden, you can:
$('#main4').hide();
if you want the link disabled, you can:
$('#main4').removeAttr('href');
or
$('#main4').attr('href','#');
or
$('#main4').attr('href','javascript:void(0);');
By the way, the different href attribute about
'javascript:void(0)' and '#' is there.

inline javascript in href

How can you do something like this:
<a href="some javascript statement that isn't a function call;" >myLink</a>
And have the js in the href execute when the link is clicked.

Just put the JS code directly in there:
fsljk
Though, you should not be doing inline scripting. You should unobtrusively attach event handlers.
<a id="lol" href="/blah">fdsj</a>
<script>
document.getElementById('lol').onclick=function() {
/* code */
};
</script>

<a href="javascript:var hi = 3;" >myLink</a>
Now you can use hi anywhere to get 3.

You can write inline-code in the same way as
<a href="javascript:[code]">
This method is also available in other tags.
addition
if you want to Execution when something tag clicking, you can fix with onClick attribute
<a onClick="function()">

I know this question is old but I had a similar challenge dynamically modifying the href attribute that sends an email when the anchor tag is clicked.
The solution I came up with is this:
$('#mailLink,#loginMailLink,#sbMailLink').click(function () {
this.setAttribute('href', "mailto:" + sessionStorage.administrator_mail_address + "?subject=CACS GNS Portal - Comments or Request For Access&body=Hi");
});
<a id="loginMailLink" href= "#" style="color:blue">CACS GNS Site Admin.</a>
I hope that helps.

How to call JavaScript function instead of href in HTML

I have some mockup in HTML
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
I got the response from server when I sent the request.
With this mockup I got as a response of AJAX request that sends my code to server.
Well, everything is fine but when I click on the link the browser wants to open the function as link; meaning after click I see the address bar as
javascript:ShowOld(2367,146986,2)
means browser thing that's url if I want to do this in firebug that's work. Now I want to do that then when anyone clicks the link then the browser tries to call the function already loaded in the DOM instead of trying to open them in browser.

That syntax should work OK, but you can try this alternative.
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">
or
<a href="javascript:ShowOld(2367, 146986, 2);">
UPDATED ANSWER FOR STRING VALUES
If you are passing strings, use single quotes for your function's parameters
<a href="javascript:ShowOld('foo', 146986, 'bar');">

If you only have as "click event handler", use a <button> instead. A link has a specific semantic meaning.
E.g.:
<button onclick="ShowOld(2367,146986,2)">
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

Try to make your javascript unobtrusive :
you should use a real link in href attribute
and add a listener on click event to handle ajax

I use a little CSS on a span to make it look like a link like so:
CSS:
.link {
color:blue;
text-decoration:underline;
cursor:pointer;
}
HTML:
<span class="link" onclick="javascript:showWindow('url');">Click Me</span>
JAVASCRIPT:
function showWindow(url) {
window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

Your should also separate the javascript from the HTML.
HTML:
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
javascript:
myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);
Just make sure the last line in the ShowOld function is:
return false;
as this will stop the link from opening in the browser.

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">

href is optional for a elements.
It's completely sufficient to use
<a onclick="ShowOld(2367,146986,2)">link text</a>