Is it possible to hide the href without hiding the whole anchor tag?
Click Me
The reason I need this is because I'd need to hide and show it based on desktop and mobile view controlled by JS.
Something like $('a').attr('href').hide(); won't work
Edit:
I need to 'hide' the href so I can 'show' it where I need to. Removing the href will not restore it.
You can use removeAttr():
$('a').removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Me
Description: Remove an attribute from each element in the set of matched elements
If you want to hide the href but still want it to redirect when clicked, use this.
Get the URL and put it in data attribute. Then remove the href attribute.
$('a').each(function() {
$(this).data('href', $(this).attr('href')).removeAttr('href');
});
When clicked on anchor, get the URL from data attribute and redirect.
$('a').on('click', function() {
window.location.href = $(this).data('href');
});
But what if You want to restore href? From where will You get it?
<div class="some-container">
Click Me
Click Me
</div>
function hideHrefs(selector) {
$(selector).each(function(){
var $this = $(this);
var href = $this.attr('href');
$this.attr('href', '').data('href', href);
});
}
function restoreHref($element) {
var href = $element.data('href');
$element.attr('href', href);
}
hideHrefs('.some-container a'); // hides all hrefs from links in container element
restoreHref($('.some-container a:first')); // restores href for dedicated element
Is it possible that when you don't want the href you do something like this
$($.find("a")).attr("href", "#")
Related
I have a question for you guys.
Lets say I have an internal anchor link on the same page as in http://jquery.com/#myAnchor
Now if I click on the anchor, then the url will be http://jquery.com/#myAnchor
And if I click on the anchor again, the url will again be http://jquery.com/#myAnchor
aka, the url actually does not change .. just the link clicked twice on the page. How do I detect that the internal anchor has been clicked again?
For example
<a name="myAnchor"></a>
If the above anchor link is on the same page, then how do I detect this hashChange.
Actually I have function that detects hashChange on a page as in below. but the code fails for this one particular codition
$(window).on('load hashchange', function () {
use data- attributes. When user clicks the anchor link, just increment the data attribute.
$(document).ready(function(){
$('a.myLink') .click(function(e) {
e.prevenDefault();
var count = $(this).attr('data-clicked');
count = parseInt(count) + 1;
$(this).attr('data-clicked', count);
});
});
<a class="myLink" data-clicked="0">Anchor Tag</a>
You can use event delegation to track the clicks, something like
$(document).on('click', '[href="#myAnchor"]', function(){
//do whatever you want here
});
Also named anchors are obsolete, you should be using ids instead.
<section id="myAnchor">
</section>
Add any class when user click on anchor tag . User click again on that ancor tag check hasClass()
Please check Below Jsfiddle enter code here
http://jsfiddle.net/upardhi/2krq8Lsy/
You can check like this also
$(document).on('click', 'a', function() {
var link = $(this).attr('href'),
currentLink = window.location.href;
if (link == currentLink)
return false;
else
//your conditions
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a name="myAnchor" href="http://jquery.com/#myAnchor">Test</a>
I am trying to target a generic item class with a unique href value based on if hash value is appended to the url unload I want to emulate the click that would normally happen on the page.
jQuery:
if(window.location.hash) {
var hash = window.location.hash;
function showHashVideo() {
jQuery("a.btn").attr("href", hash).trigger('click');
}
jQuery(showHashVideo);
}
HTML:
<a class="btn btn-mini" href="#help-video-modal-Graphing" data-url="video-url" data-title="Graphing">Watch Video</a>
As far as I can read you want to find elements HREF which matches an A element. You can do this:
jQuery("a.btn[href='" + hash + "']").trigger("click");
This will trigger a click on the a.btn with the href=hash.
jQuery trigger will not trigger DOM event clicks, so you must do this.
jQuery("a.btn").attr("href", hash).get(0).click()
You need to use Attribute-Equals-Selector jQuery( "[attribute='value']" )
jQuery('a.btn[href="' + hash + '"]').get(0).click();
After reading this Q&A I was able to pass the URL of a specific div to jQuery upon clicking the link. However, I have multiple links of the page and I want to pass their individual href values to jQuery upon clicking. Right now the code selects all links on the page:
jQuery(document).ready(function(){
jQuery(".view-frontpage a").click(function (event) {
href = $('.view-frontpage a').attr('href');
event.preventDefault();
alert(href);
});
});
The result of this currently is that it pops up a dialog displaying the href property of the first link on the page, regardless of which link is clicked. How do I change this to give me the href of the link that has just been clicked?
This should work. Change:
href = $('.view-frontpage a').attr('href');
To:
href = $(this).attr('href');
First, it's a good idea to use event delegation so you don't actually create a handler for every link on your page.
In your case, jQuery binds this inside your click handler to the click event target (the element that's been clicked on), so you need to do href = $(this).attr('href'); to get the href of the link you need.
Here is the full code using the new jQuery on() function (available since 1.7)
$(document).on('click', '.view-frontpage a', function(e) {
alert($(this).attr('href'));
e.preventDefault();
return false;
});
I have a div like this:
<article id="#pippo">blablabla</article>
that I have hided with jQuery
$('article').hide();
now I'd like to have a link menu that show a specific article id when it's clicked for example.
If I click on link:
LINK PIPPO
I'd like that the article named #pippo is shown
if I click on link that point to #pluto, an article with id #pluto have to be shown...
how can I do this in jQuery?
If you want this to work for every <a> tag on your page then you can do the following
$('a').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
More likely though you want this to work on a subset of <a> on the page. If so you can distinguish them by putting a class in the link and changing your selector as appropriate
HTML:
LINK PIPPO
JavaScript:
$('a.fakeLink').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
Try this
$("a").click(function(){
$(this.href).show();
return false;
});
First add a class to identify the anchor tags that need this functionality, eg. 'visibility_toggle'. Then add a handler that uses the href attribute to work out which div to show/hide.
$('a.visibility_toggle').click(function(e) {
$(this.href).toggle();
e.preventDefault();
});
I need to be able to get the href (or somehow get the target url) of any <a> tag that is clicked even if it is wrapping another element. For example, you could ordinarily do:
$("document").click(function (event) {
url = event.target.href;
});
However, in this example, the <a> wraps an <img>, so the event target will not have the href. Using parentNode is no good either, because there is also a span around the img in the example:
http://jsfiddle.net/z7ZYw/
I cannot change the selector either.
So is there any way to get the href in this circumstance?
You're looking for jQuery's closest method:
$(e.target).closest('a');
As a note, this can be done without jQuery aswell:
var href = (e.target.parentNode && e.target.parentNode.href) ? e.target.parentNode.href : e.target.href;
You need to bind only on anchor tags:
$("a[href]").click(function () {
console.log($(this).attr("href"));
});