用jquery写一个步骤条
时间: 2023-05-19 12:03:54 浏览: 48
可以使用以下代码来实现一个简单的步骤条:
HTML 代码:
```
<div class="step">
<div class="step-item active">Step 1</div>
<div class="step-item">Step 2</div>
<div class="step-item">Step 3</div>
</div>
```
CSS 代码:
```
.step {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.step-item {
flex: 1;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #999;
border-bottom: 2px solid #ccc;
padding: 10px 0;
}
.step-item.active {
color: #333;
border-bottom-color: #333;
}
```
JavaScript 代码:
```
$(document).ready(function() {
$('.step-item').click(function() {
$('.step-item').removeClass('active');
$(this).addClass('active');
});
});
```
这段代码使用了 jQuery 库来实现步骤条的交互效果。当用户点击某个步骤时,该步骤会被标记为 active,同时其他步骤会被取消标记。CSS 样式会根据 active 类来改变步骤条的外观。