Can I use a

Question

I have this code.

<li class="active">
    <a href="#tab-weekly" data-toggle="tab">Weekly Payment</a>
</li>
<li>
    <a href="#tab-advance" data-toggle="tab">Advance Payment</a>
</li>
<li>
    <a href="#tab-data" data-toggle="tab">Expenses</a>
</li>

My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.

possibly duplicate http://stackoverflow.com/questions/5025941/is-there-a-way-to-get-a-button-element-to-link-to-a-location-without-wrapping — Thorin, Jun 01 '16 at 11:56

Ricardo Reyna · Accepted Answer · 2016-06-01T12:01:13.717

6

Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>

edited Jun 01 '16 at 12:01

answered Jun 01 '16 at 11:55

Ricardo Reyna

574
6
15

Thankyou. For the help. I tried `` but not working – Ali Zia Jun 01 '16 at 11:59
Try replacing the double quotes around your URL with single quotes and make sure to close the quotes around the onclick assignment – Ricardo Reyna Jun 01 '16 at 12:02
1

@Ricardo Reyna: You do realize that same mistake was in your answer and the OP was just blindly copying off of it, right? – BoltClock Jun 01 '16 at 12:04
Yes, I saw the mistake and edited my response before replying. Thanks – Ricardo Reyna Jun 01 '16 at 12:05

score 5 · Answer 2 · answered Jun 01 '16 at 12:01

You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.

$("button").click(function(){
    window.location.hash = $(this).data("href");
});

#first, #second, #third {
    height: 200px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

score 3 · Answer 3 · edited May 23 '17 at 10:32

3

You can try to take a look at this

Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?

<button type="button">
   <a href="www.google.com">hello</a>
</button>

if it is for the style you can just apply a style to the a tag like this <a href="http://google.com" class="My class">Go to Google</a>

Goodluck!

edited May 23 '17 at 10:32

Community

1
1

answered Jun 01 '16 at 11:56

Angel ofDemons

1,267
8
13

I tried `` but not working – Ali Zia Jun 01 '16 at 12:00
OP is trying to use the goto bookmark part of a href, eg `href='#id'` not just create a link to an external website. – freedomn-m Jun 01 '16 at 12:01

score 3 · Answer 4 · answered Jun 01 '16 at 12:01

Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:

<a href="http://www.somewhere.com/anotherpage.aspx#something">click</a>

In this case it will take you to the anotherpage.aspx page's element who's id is 'something'. Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.

Here is a great link to show the difference between anchor and button tag. Check it.

Thanks.

score 2 · Answer 5 · answered Jun 01 '16 at 11:53

2

Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't

answered Jun 01 '16 at 11:53

Justinas

41,402
5
66
96

seems more like a comment. – Jai Jun 01 '16 at 11:54
@Jai: The question asks, "Can I do this?" And the answer is no. How is it "more like a comment"? – BoltClock Jun 01 '16 at 11:55
@BoltClock Then last 3 words should be posted! right...! – Jai Jun 01 '16 at 11:56
@Jai: I'm sorry but your comment is incomprehensible. Can you rephrase? – BoltClock Jun 01 '16 at 11:58
@BoltClock sorry! English is not native language to me, what i meant was _No, you can't_ should only be posted or question should be closed as dupe if any. – Jai Jun 01 '16 at 12:01
1

@Jai: The answer is *explaining* why the answer is no! Why would you want someone to post an answer without explanations? And how is the question being a dupe relevant at all to this answer? – BoltClock Jun 01 '16 at 12:03

score 2 · Answer 6 · answered Jun 01 '16 at 11:56

2

You can use the styles over <a class="your-btn-style"> to show your anchor like a button.

If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :

<a href="#tab-advance" class="btn btn-primary" data-toggle="tab">Advance Payment</a>

I also used this approach in my project :

answered Jun 01 '16 at 11:56

Alina Anjum

1,178
6
30
53

I need button, not a tag :( – Ali Zia Jun 01 '16 at 12:06
oh :( so you can't use href instead JS – Alina Anjum Jun 01 '16 at 12:30
Yes.. I got it working now. Thanks for your help though. – Ali Zia Jun 01 '16 at 12:31

Can I use a instead of to go to #location?

6 Answers6

Can I use a