Question

我想在流程“Ask Question”部分的堆栈中创建类似“标签部分”的文本。屏幕截图如下：。
我怎样才能做到这一点？

解释我有文本框通过ajax填充文本框我希望填充的文本框显示为带有十字标记的气泡以将其删除。我怎么能得到这个，因为当前整个文本框在文本框单击时消失。下面是屏幕截图。

Answer 1

您可以使用BOOTSTRAP获取相同的

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body> 
 
<div class="container">
  <h5>Example <span class="label label-default">New<span>&nbsp;&times;</span></span></h5>
</div>

</body>

根据需要更改颜色。

Answer 2

<!DOCTYPE html>
<html>
<head>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
    <body> 
     
    <div class="container">
      <h5>Example <span class="label label-default">New<span class="closeIt" style="cursor:pointer;">&nbsp;&times;</span></span></h5>
      <h5>Example <span class="label label-default">New1<span class="closeIt" style="cursor:pointer;">&nbsp;&times;</span></span></h5>
      <h5>Example <span class="label label-default">New2<span class="closeIt" style="cursor:pointer;">&nbsp;&times;</span></span></h5>
    </div>
<script>
$(document).ready(function(){
    $('.closeIt').click(function(){
        $(this).parent().hide();
    });
});
</script>
    </body>

</html>

看看这个

在堆栈溢出中创建类似“标签部分”的文本

2 个答案: