I'm using Revolution Slider.
I'm adding a layer to the slide, and when I am inserting a button in the layer I use the following code:
<a href='#' class='tp-button blue small'>Blue Button</a>
I want the button to redirect to
<a href='http://www.hotelscombined.com/Place/Sydney.htm?a_aid=107946&brandid=289436' target='_blank' rel='nofollow'>Hotels in Sydney</a>
How can I do that?
<a class='tp-button blue small' href='http://www.hotelscombined.com/Place/Sydney.htm?a_aid=107946&brandid=289436' target='_blank' rel='nofollow'>Hotels in Sydney</a>
Adding additional properties to <a> tag won't hurt I guess.
Related
I trying to navigate from a.class1 to div.class2. But the URL is changing when the link is called. So when trying to back page, it goes back to the current page on another section.
<a RouterLink="." [fragment]="'idDiv'" class="class1"></a>
...
<div class="class2" id="idDiv"></div>
Simple add 'skipLocationChange' to your anchor tag
<a routerLink="." [fragment]="'idDiv'" class="class1" skipLocationChange></a>
You can also refer to this one: Angular 2, handle anchor links with href='#'
I have a question why using tag a I can click the whole row on the right is clickable as well?
on the back row on right side this area is clickable even through there no link any way to remove this clickable area ?
<a id="back-page-btn" class="back-btn d-flex" href="">
<i data-feather="arrow-left-circle"></i>
<p class="mx-2 my-auto">Back</p>
</a>
I realize this html code I am able to click on the white background on the back row is there a way to only use link to be clickable but not the white background.
Simple fix was remove d-flex class and change as using p to label to wrap it up with /a
<a id="back-page-btn" class="back-btn" href="manageUsers_api.html"><i data-feather="arrow-left-circle"></i>
<label style="cursor: pointer;"class="mx-2 my-auto">Back</label></a>
I have a nextjs frontend project with tailwindcss installed.
In the following example code
import Link from 'next/link'
return(
<div>
<Link className="text-sm hover:text-gray-600" href="#">Test Link styling</Link>
<a className="text-sm hover:text-gray-600" href="#">Test Link styling</a>
</div>
)
When inspecting element on the page, the anchor tag gets styled by tailwindcss but the anchor tag from the Link tag doesn't get any styling.
Does anyone know how to fix this?
Does it require changing the tailwindcss configs?
Just put the a tag inside the Link tag without the href, leave href in Link and apply styles to the a tag. Like :
<Link className="text-sm hover:text-gray-600" href="#">
<a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>
source:
https://nextjs.org/docs/api-reference/next/link
Hope this helps and if you get a chance please upvote OnClick fires for another buttons click event
I put a button inside it cause idk why it styles better than an <a> tag
<Link href={"/" + props.id}>
<button className="text-slate-900">Show Details</button>
</Link>
It gets the job done.
Yes, that's because a Next.js Link doesn't accept a className property.
If you inspect the resulting HTML of your code, you will see that the resulting <a> tag will not have any of your classes on them.
For this to work properly you will need to put an anchor tag as a child to your Link:
<Link href="#">
<a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>
Now next will not create an <a> tag for your Link, but instead, pass the href property to your existing <a> tag.
you can use a a tag rather than a button tag.
To make it work properly Link needs to have passHref prop.
Use a tag of HTML inside Link tag of next and give href inside Link.
<Link href="/support">
<a className="rounded-lg p-3 duration-300 hover:bg-slate-200">
Support
</a>
</Link>
Here is my code:
<a itemprop='image' target='_blank' href='http://lamtakam.com/img/post/imageGenerator.php?tc=17&id=321780&t=%D8%B3%D9%84%D8%A7%D9%85'>show</a>
See? It is a <a> tag which contains the URL of an image. That's why I've set itemprop='image' to it and fortunately, Google detects it as well.
All I want to know, how can I also set a text to that image? Something like alt attribute?
You can't. <a> elements are containers, not replaced content. There don't have any intrinsic content to show an alternative to.
As #Quentin points out, you cannot use <a> in this way.
You can however wrap <a></a> around <img>. For example you can use
<a itemprop='image' target='_blank' rel='noopener noreferrer' href='http://lamtakam.com/img/post/imageGenerator.php?tc=17&id=321780&t=%D8%B3%D9%84%D8%A7%D9%85'><img src='example-image.gif' alt='Example image' height='42' width='42'></a>
Notice the rel='noopener noreferrer' in there? If you use target='_blank' you should use rel='noopener noreferrer' to prevent the phishing attack called reverse tabnabbing.
Old code:
Image
Title
Download
New code:
<a href="test.html">
Image
Title
Download
</a>
I need to keep the classes because otherwise it will screw up the CSS and it's too much to change.
But is the code bad for SEO?
It's bad full stop - nested <a> elements are illegal in HTML.
Would something like this suit your needs?
<a href="test.html">
<span class="class1">Image</span>
<span class="class2">Title</span>
<span class="class3">Download</span>
</a>