layui实现步骤条

re0码农

于 2023-08-18 11:32:45 发布

阅读量1.4k

点赞数

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_61196563/article/details/132358490

版权

这篇博客介绍了如何利用layui框架来实现一个步骤条的功能。通过HTML结构、CSS样式和JavaScript交互，详细展示了步骤条的创建过程，包括步骤条的布局、样式设定以及前进、后退按钮的事件处理，实现了步骤条的状态更新和视觉效果变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.step-item {
position: relative;
text-align: center;
cursor: pointer;
}

.step-item .step-num {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 5px;
}

.step-item .step-text {
font-size: 14px;
}

.step-line {
height: 2px;
background-color: #ccc;
margin-bottom: 20px;
transition: width 0.3s ease;
}

.layui-btn-container {
text-align: right;
}
</style>

// 初始化步骤条
updateStep();

// 上一步按钮点击事件
$('#prevBtn').on('click', function () {
if (currentIndex > 0) {
currentIndex--;
updateStep();
}
});

// 下一步按钮点击事件.attr('class', "step - item layui - bg - blue layui - this");
$('#nextBtn').on('click', function () {
$('#step2')
if (currentIndex < stepItems.length - 1) {
currentIndex++;
updateStep();
}
});

// 步骤条点击事件
stepItems.on('click', function () {
currentIndex = $(this).index();
updateStep();
});

// 更新步骤条状态
function updateStep() {
stepItems.each(function (index) {

var stepId = $(this).attr('id');
if (index === currentIndex) {
$('#' + stepId + " .step-num").attr('style', "background-color:cornflowerblue;color:white");
} else {
$('#' + stepId + " .step-num").attr('style', "");
}
});
stepLine.css('width', (currentIndex / (stepItems.length - 1) * 100) + '%');
}
});
</script>