Twitter Bootstrap Question posted in

close button in bootstrap tabs – without putting <button> inside <a>? – Twitter bootstrap

This question Close Button for Twitter Bootstrap3 Tabs shows how to create a Bootstrap3 tab with a close button in it: 

<li class="active"><a href="#">Tab 1 <button><i class="fa fa-times"></i></button></a>

This works for me (I’m using glyphicons instead of font awesome) but then i read here Can I nest a <button> element inside an <a> using HTML5? that it’s not acceptable to have a <button> inside of an <a> tag.

What is the right way to add a button to a bootstrap tab if it’s not allowed to be inside the <a> element?

This JSFiddle (not mine) http://jsfiddle.net/vinodlouis/pb6EM/1/ shows the functionality I am going for with the little x button on the tabs.

Tags:

2

Answers


  1. 0

    If you want to insert a button in an anchor, the answer is you cannot (or rather you should not). The following two examples show how to get an html button to behave as a link; either by styling an anchor to look like a button (example 1), or using the onclick event of a button to trigger a JavaScript redirection as an anchor would (example 2).

    <!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <!-- Styling the anchor as a button -->
  <a href="#" class="btn btn-default" role="button">An anchor that looks like a button</a><br/>

  <!-- Letting JavaScript do the redirection -->
  <button type="button" class="btn btn-default" onclick="javascript:location.href='#'">A button with onclick JS redirection</button>
</body>
</html>

    Edit: Your latest edit and comment make it clearer what you are after, but I don’t understand why you would phrase it as “having a button in an anchor”. Bootstrap tabs are neither anchors nor buttons, so I would say the OP is really not well formulated. And being able to close a tab does not require either.

    Specifically to answer you question now, you should put the cross-icon into a span with left padding and use the onclick event to trigger the tab’s deletion with JavaScript.

    Login or Signup to reply.
  2. 0

    What is the right way to add a button to a bootstrap tab if it’s not allowed to be inside the element?

    Simply substitute it for an element that is allowed at that position …?

    From (taken from the jsfiddle example you linked to)

    <li><a href="#profile"><button class="close closeTab" type="button">×</button>Sent</a>

    to

    <li><a href="#profile"><span class="close closeTab">×</span>Sent</a>

    and done.

    That might still give you unexpected results when the user interacts with it, of course – after all, when they click that “button”, they are clicking the link as well. So whatever scripting gets attached to the close button, will have to take that into account, and stop event propagation or something like that.

    The real proper way to do this would of course be to not nest those elements, that are supposed to have completely different functionality, in the first place, but make them separate, independent elements. Overlying one on top of the other is a matter of formatting.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search