jquery - 我如何指示此菜单下的表格已完成

Question

我刚刚为一个菜单编写了这段代码，该菜单下包含多个表单，但有一点我想表明用户已成功填写菜单下的表单，所以我想显示类似标记图标的内容告诉用户他们已经填写完菜单下的表单。

见下图:

下面是我的 html 和 css 代码:

谢谢

HTML:

<div class="container">
<div class="row">


    <div id="completedStep" class="col-md-3 signUpStep">
            <div class="stepNumb">1</div>
            <div class="stepInfo">Basic Info</div>
    </div>  


    <div id="activeStep" class="col-md-3 signUpStep">
            <div class="stepNumb">2</div>
            <div class="stepInfo">Address</div>
    </div>  



    <div class="col-md-3 signUpStep">
            <div class="stepNumb">3</div>
            <div class="stepInfo">Tutoring</div>
    </div>  

    <div class="col-md-3 signUpStep">
            <div class="stepNumb">4</div>
            <div class="stepInfo">Schedule</div>
    </div>  



</div>
</div>

CSS

#activeStep{
background: #007ee5;
color: #fff;
}

#completedStep{
color: #888;
}

.signUpStep {
position: relative;
float: left;
background-color: #fafafa;
height: 42px;
width: 100%;
margin: 0;
overflow: hidden;
color: #007ee5;
}

.stepNumb {
float: left;
font-size: 34px;
line-height: 1em;
font-weight: 300;
}

.stepInfo {
margin-left: 28px;
line-height: 16px;
font-size: 16px;
padding-top: 5px;
}

如果你也能帮我检查一下代码，看看它是否符合浏览器标准，我将不胜感激。

等待阅读你们的文章。

Answer 1

一种方法是将自定义内容图像添加到指定的 div。

.isValid{
  background: url("https://cdn2.iconfinder.com/data/icons/glossy_ecommerce_icons/ok.png") no-repeat scroll;
  float: right;
  width: 5%;
  height: 100%;
}

你的 HTML 应该是这样的:

<div id="completedStep" class="col-md-3 signUpStep">
        <div class="isValid"></div>
        <div class="stepNumb">1</div>
        <div class="stepInfo">Basic Info</div>
</div>  

当内容有效时，只需将“isValid”类添加到 div。

示例:http://www.bootply.com/6UEbNL2uBQ

显示\隐藏使用JQuery:

$('#divSelector').addClass('isValid');
$('#divSelector').removeClass('isValid');

编辑: 如果您使用 bootstrap，您的生活就会变得更轻松，请确保您阅读了有关 bootstrap 的表单控件验证的信息:

http://getbootstrap.com/css/#forms-control-validation