3

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.

Mohammad
  • 21,175
  • 15
  • 55
  • 84
Ali Zia
  • 3,825
  • 5
  • 29
  • 77

6 Answers6

6

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

Ricardo Reyna
  • 574
  • 6
  • 15
5

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>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
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!

Community
  • 1
  • 1
Angel ofDemons
  • 1,267
  • 8
  • 13
3

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.

Sk. Tajbir
  • 290
  • 2
  • 9
2

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

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
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 :

enter image description here

Alina Anjum
  • 1,178
  • 6
  • 30
  • 53