如何在引导网格列中实现标记/标记？

Question

在我的代码中，我需要这样的东西。

对于网格，我使用了这样的引导网格系统：

<div class= "row">
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
</div>

现在点击按钮我必须显示选择。怎么做？

Answer 1

你应该做的是使用css：after，如果你使用的是JQuery，那很容易做到。

据我了解，你需要的是当其中一个div [s]点击时，你在它的右上角显示一个标记（勾号）。因此，2113是复选标记（tick）的代码，您可以在CSS content中使用它。

<强> HTML：

<div class="container">
<div class= "row our-div">
    <div class = "col-xs-6">div1</div>
    <div class = "col-xs-6">div2</div>
    <div class = "col-xs-6">div3</div>
    <div class = "col-xs-6">div4</div>
</div>
</div>

<强> CSS：

.active:after{
 font-family: "FontAwesome";
    content: "\2713";
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    background:green;
    border-radius:25px;
    width:18px;
    height:18px;
    text-align:center;
}

.our-div > div{
  height:100px;
  background:purple;
   color:white;
}

JavaScript（JQuery）：

$(".our-div div").click(function(){
  $(this).toggleClass('active');
});

DEMO - JSFiddle

Answer 2

您可以点击每次addClass()或将课程添加到所有.mark

$(".className").click(function(){
    $(".className").addClass("mark");
});

标记和取消标记使用toggleClass()

<强>参考：

1. jQuery toggleClass()
2. jQuery addClass()