I want a link that does nothing. I don't want this:
<a href="#">
because then the URL becomes something.com/whatever/#.
The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!
I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.
The following will prevent your href from being ran
<a href="#" onclick="return false;">
If you are using jQuery, event.preventDefault() can be used
Try this:
link
In HTML5, this is very simple. Just omit the href attribute.
<a>Do Nothing</a>
From MDN on the a tag href attribute:
href
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.
What about the hand cursor on hover?
The default styles for a browser may not change the cursor to a pointer, for a tags with no href. You can universally change this with the following CSS.
a {
cursor: pointer;
}
<a>Do Nothing</a>
However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.
What about making it tab-focusable?
Just add tabindex="0" to the element.
<a tabindex="0">Do Nothing</a>
Does it makes sense to use an a tag without a link?
Usually no, it's probably better to use a button element instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like div when possible, as this is not semantic at all.
Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:
p.not-a-link { text-decoration: underline; cursor: pointer }
Or even better just make it a link and let the javascript function which is used e.preventDefault() to prevent the link.
Also add the link to the href so that users without JS enabled will still be able to use it (as a fallback).
Link text - that's what I usually use
Proper:
Link
We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0); on the href.
The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
a {
text-decoration: initial;
}
This link actually does nothing when clicked
#Curt's answer will work, but you can use a cursor style in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.
Cross browser conformant pointer css (from cursor style guide):
element {
cursor: pointer;
cursor: hand;
}
one way which no one has mentioned is to point the href to an empty local file location like so
<a href='\\'>my dead link</a>
why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.
just remove the href attribute. it's not necessary.
<a> a link </a>
What if you use only css?
pointer-events: none;
span, a {
color: black;
cursor: default;
pointer-events: none;
text-decoration: none;
}
<span>Normal text --> Link to google click me <-- another text</span>
Text goes here
When clicked this link will do nothing except display a little javascript:void(0) in the corner
DONT USE <a>... instead use <span class='style-like-link'>
and then use the class to style it however you want.
Related
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
Senario: I write "anchor" tag,inside it i give "href".After that requirement is that when i click on the link it should do nothing,but we cannot left empty "href" tag too.How could this possible?
Standard practice way of declaring empty href would be to use href="#" or href="javascript:void(0);"
Explanation:
href="#" it's a simple and quick fix, but adds an extra entry to the browser history when clicked.
Link explicitly add a null-effect href attribute, so when clicked it doesn't have any effect and also does't mess with the browser history.
kindly use
This should solve your issue.
since the HREF may also be used to identify sections within a document, the HREF contains two components: the URL, which is the actual link, and the clickable text that appears on the page, called the "anchor text."
you could use
or
href="javascript:void(0);"
which essentially means that a void do nothing since evaluation of 0 using void calculates to undefined primitive value.
This code works fine in Chrome, but does not work in Firefox. If the <button> tag is removed it will work in Firefox.
Is there something I can do to make this work in Firefox?
<button>
#Html.ActionLink("Continue","Index","AlternateName")
</button>
Oh no, <a> is invalid inside <button>. That's invalid markup according to the HTML specification. And when you write broken markup all you get is undefined behavior which in addition could vary between user agents, which by the way is what you are observing.
So to make this work, simply fix your markup. You cannot expect a browser to correctly interpret something that is invalid, unless of course you write your own browser.
I don't know what is your scenario but I guess you will have to remove the anchor from this button. If you don't have control over the generated markup (because for example you are using some third party component which spits this invalid markup) as a last resort you could use javascript/jquery to manipulate the DOM after it is created to move the anchor out of this button so that you don't end up with something so broken.
Instead of wrapping the action link in a button tag and formatting the button tag in the style sheet I added a css class to the actionLink like this.
#Html.ActionLink("Add Address", "Create", "Address", null, new { #class = "actionLinkButton" })
Add Button inside Hyperlink tag in mvc, write the Controller and action methods
for passing any parameters:
Can I create a link that has another link in html.
For example, I want to call an html form and the target will be the sidebar frame.
At the same time, the board frame will also go back to the previous page.
I don't think you would be able to do this in plain HTML, but you could probably use JavaScript to accomplish what you're after.
as steve mentioned you need a bit of javascript:
<iframe id="frame1"></iframe>
<a href="" onclick="update();return false;" >DoubleActionLink</a>
<script>
function update() {
window.open("http://www.stackoverflow.com");
parent.document.getElementById('frame1').src="http://www.w3c.org";
}
</script>
btw, you said
I want to call an html form
html form means you'll submit something to web server...so you aren't asking for pure html solution. Isn't ?
The w3 specification about links clearly states that this is forbidden ..
12.2.2 Nested links are illegal
Links and anchors defined by the A
element must not be nested; an A
element must not contain any other A
elements.
But you can handle the click event through javascript and do additional actions when clicked..
Use target="_top" and set the href to the URL of a <frameset> document which loads all the frames you want by default.
Better yet, don't use frames. They are more trouble than they are worth.
<span name="tumme"><img ...
is not valid because "name" is not valid in "span".
But I need to use name="tumme" and I need to be able to use text and img inside the tag.
So what tag can I use together with "name" and on the same time follow w3c?
To answer the question directly, as per the spec the name attribute is allowed on the following HTML elements (very few of these will be useful to you):
BUTTON
TEXTAREA
SELECT
FORM
FRAME
IFRAME
IMG
A
INPUT
OBJECT
MAP
PARAM
META
Is there a reason you must use a "name" attribute rather than a class or an id? Since both class and id are valid for span elements, and since span appears to be the most appropriate element to use,I'd set one of those to "tumme" rather than bending another element into shape.
You could use the <a> tag with no href attribute.
As I said in response to your earlier question — use classes.
Basically, the only valid reason that I can think of where you would want to use the name attribute, is to have DOM access via document.getElementsByName()
or to use it as a FORM OUTPUT.
As a result, what you should be doing is using the HTML5 OUTPUT tag
and add the following in your HEAD tag for legacy browsers:
// Create a fake OUTPUT element, so IE can style it.
<script type="text/javascript> document.createElement("output");</script>
// Implement default style, so that it acts like a SPAN in other browsers:
<style type="text/css"> output { display:inline; border:0; outline:0; margin:0;padding:0; } </style>
http://html5doctor.com/the-output-element/
<output name="tumme"><img src="..." /></output>
If it is only for styling purposes or simple DOM query purposes
then you should use this as proposed earlier:
<span class="tumme"><img src="..." /></span>
or
<span id="tumme"><img src="..." /></span>
name is only valid in the <a> tag IIRC (and form elements as was pointed out by David in the comments) but I'm pretty sure that is not what you're after:
<a name="whatever"></a> would create an "anchor" on a page that could be linked to with Link text.
Why do you need to use the name attribute? Why couldn't you simply use id instead?