关闭按钮在引导标签 - 没有放<按钮>里面< a&gt ;? [英] close button in bootstrap tabs - without putting <button> inside <a>?

问题描述

这个问题 Twitter Bootstrap3标签的关闭按钮显示了如何创建一个Bootstrap3标签，其中有一个关闭按钮：

 < li class =active>< a href =＃ >标签1<按钮>< i class =fa fa-times>< / i>< / button>< / a> 
  

这适用于我（我使用glyphicons而不是字体真棒），但是我在这里阅读< a href =https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5>我可以嵌套一个<按钮>元素在< a>使用HTML5？，在< a> <按钮> 是不可接受的>标记。

如果不允许在< a>中添加按钮到引导选项卡的正确方法是元素？

这个JSFiddle（不是我的） http://jsfiddle.net/vinodlouis/pb6EM/1/ 通过选项卡上的小x按钮显示了我要使用的功能。

解决方案

如果不允许将按钮添加到引导选项卡，那么正确的方法是什么在元素内部吗？

只需将它替换为 在该位置允许的元素...？

来自（取自您链接的jsfiddle示例）

 < ; li>< a href =＃profile>< button class =close closeTabtype =button> x< / button>已发送< / a> 
  

至

 < li>< a href =＃profile>< span class =close closeTab> x< / span>发送< / a> 
  

完成了。

---

当用户与它交互时，这可能仍然会给您带来意想不到的结果 - 毕竟，当他们点击该按钮时，他们也会点击链接。所以无论脚本是否被关闭按钮，都必须考虑到这一点，并停止事件传播或类似的东西。

>当然，这样做的适当方法当然不是将那些被认为具有完全不同功能的元素嵌套在一起，而是将它们分开，独立的元素嵌套在一起。覆盖另一个是格式化。

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.

解决方案

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.

这篇关于关闭按钮在引导标签 - 没有放&lt;按钮&gt;里面&lt; a&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！