CODEWITHSUNDEEP
javascripthtml
eric.joy
eric.joy

Reputation: 35

adding href to span tag

I have the following code 

<a href="www.google.com">
    <span>Hello Clickhere</span>
</a>

I want to create a span tag with href without using the <a> tag.Somewhat like this

<span href="www.google.com">Hello Click</span>

All I want to do is to remove the <a> tag from the block and add the functionality to the <span> or the <div> tag

Upvotes: 1

Views: 21398

Answers (3)

cmarangu
cmarangu

Reputation: 234

If what you want is the style of a span element, then use the CSS 'unset' property all: unset; to style your anchor element like a span. A span is just a generic unstyled inline element.

You can use this trick to style links like buttons and buttons like links while keeping their tags' semantic functionality (links to link to web pages, buttons to submit forms or run javascript).

Google recommends to avoid using JavaScript redirects or invalid HTML syntax to create link-like elements when possible.

/* Copied from Chrome User Agent stylesheet
with all:unset; added on the first line of
the rule to clear all other properties */
.fake-link {
    all: unset;
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

.fake-span {
    all: unset;
    display: inline;
}
<h1>Example</h1>

<h2>Ordinary link</h2>
<a href="https://example.com/" target="_blank">go to IANA's site</a>

<h2>&lt;span&gt; styled like link</h2>
<span class="fake-link">go to IANA's site</span>

<h2>&lt;button&gt; styled like link</h2>
<button class="fake-link">go to IANA's site</button>

<h2>&lt;a&gt; styled like &lt;span&gt;</h2>
<a class="fake-span" href="https://example.com/" target="_blank">go to IANA's site</a>

Upvotes: 0

Dato DT
Dato DT

Reputation: 129

You can create jquery function for redirecting the link and use it on span tag like this

<span onclick="redirectIt(this)" href="http://google.com">Hello Click here</span>

and jquery function will be like this

function redirectIt(obj){
    var goToLink = obj.getAttribute("href");
    window.location.href=goToLink;
}

it will talke browser to google.com by clicking on span

Upvotes: 1

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

you can use window.location

 <span onclick="window.location='your http/https link'">Hello Clickhere</span>

Upvotes: 8

Related Questions