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.
Related
Hello recently I'm facing a new problem. I used a custom html code in the middle section of my website. After implement the html my website automatically go to that section after loading. I think this is the culprit:3
<div class="results" id="results">
<a class="domain" href="#" id="domain">helloworld.com</a>
</div>
Here there is an hash tag that force browser to go to this particular section. That is to say I used "javascript:void(0)" instead of # but nothing improved.
My question is how can I push browser to say header and not to follow that result id.
Simple use javascript
It will changes hash in url from anything to your required header
Make sure your header has the id attribute header.
window.location.hash = "header";
You can prevent the browser to follow a link (with an assigned href) with some simple JS code:
document.getElementById("domain").onclick(e => e.preventDefault());
Where e is the Click event object.
Although a javascript:void(0) on the href property should do the trick too.
You should probably also set the link's rel property to nofollow, like this:
<a class="domain" href="#" id="domain" rel="nofollow">helloworld.com</a>
I have this <a> href below that if clicked will redirect me to
the page.publicWebsite value is www.duckduckgo.com
{{page.publicWebsite}} displays www.duckduckgo.com
HTML show www.duckduckgo.com in the href so everything good ?
But when I click on the link I go to https://mywebsite/currentpage/www.duckduckgo.com
<a v-if="page.publicWebsite" target="_blank" :href="page.publicWebsite" :title="page.publicWebsite">{{page.publicWebsite}}<img src='/img/layout/icon-www.png' class='userInfoIcons' /></a>
That's because href treats your URL as a relative URL.
You've got to declare it as an absolute URL, one of two ways:
page.publicWebsite = 'https://www.duckduckgo.com'
// or
page.publicWebsite = '//www.duckduckgo.com'
So I have a number of dropdown links on my main navigation that need to link to other landing pages and scroll or show specific part of that page, like an article or a specific service. I have went through a lot of examples here but can't get this to work:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data#broadband/'">BROADBAND & MANAGED INTERNET</a>
The above link should anchor to this div on another page:
<div class="row broadband-block" id="#broadband">
At the moment it lands on the page it needs but doesn't go to the anchor div that it's supposed to,but it does add #broadband to the url in the browser. What am I doing wrong and what would be the best solution, as I have quite a few links like that to do?
Your problem is the ID attribute. Remove the # from your ID and it should fix your problem:
<div class="row broadband-block" id="#broadband">
<div class="row broadband-block" id="broadband">
Or adjust your 'a' tag and add an extra '#' to the front of your url:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data##broadband/'">BROADBAND & MANAGED INTERNET</a>
Also, javascript onclick not needed unless this is what your application environment requires, it can all be done inside href attribute.
you should do this
<a class="dropdown-item" href="/voice-data/#broadband">BROADBAND & MANAGED INTERNET</a>
just use the href instead of onclick.
and the ids should match, at the current state you should be using ##broadband
while you should use the id as follows:
<div class="row broadband-block" id="broadband">
Edit: #pointy pointed it out (no pun intended)
In the Component Template section of this angular tutorial, they use the following code:
...
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
</a>
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
...
In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.
I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?
Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
for more info you can see ...
What is href="#" and why is it used?
But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....
here is a nice example .. but you need time to understand it in depth ..
It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:
Specify which page should be loaded by js.
Give the user ability to refer to specific page in future or share it.
Is there a way of using javascript/jquery to test if a clicked hyperlink is going to the current page (ie anchor tags) vs going to a different page.
If my current url page is http://www.mypage.com/mypage/index.html
If so, I want to ignore these instances:
<a href="#">
<a href="index.html#anchor5">
<a href="#mytitle1">
<a href="//www.mypage.com/mypage/index.html#anchor1">
<a href="mailto:xxxxxxxx#gmail.com>
<a href="tel:+12344555">
And also ignore other instances that I might have missed above that references the current page with a href tag.
Thanks