引导标签中的关闭按钮 - 不在<a>?

时间:2016-09-09 03:29:54

标签: javascript html html5 twitter-bootstrap

内放置

2 个答案:

答案 0 :(得分:-1)

如果你想在一个锚中插入一个按钮,答案是你不能(或者你不应该)。以下两个示例显示如何使html按钮表现为链接;或者通过将锚点设置为按钮(示例1),或者使用按钮的onclick事件来触发JavaScript重定向作为锚点(示例2)。

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

编辑:您最新的编辑和评论会让您更清楚自己所追求的内容,但我不明白为什么您会将其标记为&#34;在主播中设置按钮&# 34 ;. Bootstrap标签既不是锚点也不是按钮,所以我会说OP的配方确实不好。并且能够关闭标签也不需要。

现在专门回答你的问题,你应该将交叉图标放入带左边填充的范围内,并使用onclick事件触发使用JavaScript删除标签。

答案 1 :(得分:-1)

  

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

只需将其替换为该位置允许 的元素......?

From(取自您链接到的jsfiddle示例)

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

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

并完成。

当用户与其进行交互时,这仍然可能会给您带来意想不到的结果 - 毕竟,当他们点击“按钮”时,他们也会点击链接。因此,无论脚本附加到关闭按钮,都必须考虑到这一点,并停止事件传播或类似的事情。

真正这样做的正确方法当然是首先不要嵌套那些应该具有完全不同功能的元素,而是将它们作为独立的独立元素。将一个叠加在另一个上面是格式化的问题。