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;
}

如果您也可以帮助我查看代码，看看它是否符合broswer标准，我将不胜感激。

等着你们的来读。

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>

只需添加＆＃34; isValid＆＃34;当内容有效时，将类放到div中。

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

show \ hide使用JQuery：

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

修改如果您使用bootstrap，您的生活变得更加轻松，请务必阅读有关bootstrap的表单控件验证的信息：

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

如何指示此菜单下的表单已完成

1 个答案: