更多>
最新下载
24小时阅读排行榜
- 1 html源码怎么保存为云端网页文件_html源码保存到云端的详细步骤
- 2 js some方法是什么
- 3 Linux visudo命令安全编辑示例
- 4 mysql InnoDB和MyISAM的对比
- 5 .NET Core Web API如何处理跨域(CORS)问题_CORS跨域解决方案
- 6 mysql如何查看数据库名
- 7 win11键盘失灵了怎么办 Win11键盘部分或全部按键无反应修复指南
- 8 CSS布局中grid-auto-flow属性如何使用_自动排列网格技巧
- 9 显卡散热模组横评:三风扇 vs. 双风扇 vs. 涡轮卡的温度与噪音
- 10 HTML5代码如何管理会话存储 HTML5代码中sessionStorage的应用
- 11 python列表排序的两种方式
- 12 win11如何开启卓越性能模式_Windows11性能模式调整方法
- 13 b站名片怎么关_关闭或隐藏B站个人名片的操作方式
- 14 在Java中如何使用接口实现抽象
- 15 LEANTS乐蚁J5怎样设置指纹解锁_LEANTS乐蚁J5指纹解锁功能开启与使用方法
更多>
最新教程
-
- Node.js 教程
- 7680 2025-08-28
-
- CSS3 教程
- 1070070 2025-08-27
-
- Rust 教程
- 12146 2025-08-27
-
- Vue 教程
- 14333 2025-08-22
-
- PostgreSQL 教程
- 11069 2025-08-21
-
- Git 教程
- 5225 2025-08-21
jQuery+CSS3的分步向导手风琴切换代码
这是一款非常实用简洁的手风琴样式,jQuery+CSS3分步向导手风琴切换代码,按步骤点击展开手风琴效果代码。
js代码
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$(".done").click(function(){
var this_li_ind = $(this).parent().parent("li").index();
if($('.payment-wizard li').hasClass("jump-here")){
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$('.payment-wizard li.jump-here').removeClass("jump-here");
}else{
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$(this).parent().parent("li").next("li:not('.completed')").addClass('active').children('.wizard-content').slideDown();
}
});
$('.payment-wizard li .wizard-heading').click(function(){
if($(this).parent().hasClass('completed')){
var this_li_ind = $(this).parent("li").index();
var li_ind = $('.payment-wizard li.active').index();
if(this_li_ind < li_ind){
$('.payment-wizard li.active').addClass("jump-here");
}
$(this).parent().addClass('active').removeClass('completed');
$(this).siblings('.wizard-content').slideDown();
}
});
})
</script>
js代码
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$(".done").click(function(){
var this_li_ind = $(this).parent().parent("li").index();
if($('.payment-wizard li').hasClass("jump-here")){
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$('.payment-wizard li.jump-here').removeClass("jump-here");
}else{
$(this).parent().parent("li").removeClass("active").addClass("completed");
$(this).parent(".wizard-content").slideUp();
$(this).parent().parent("li").next("li:not('.completed')").addClass('active').children('.wizard-content').slideDown();
}
});
$('.payment-wizard li .wizard-heading').click(function(){
if($(this).parent().hasClass('completed')){
var this_li_ind = $(this).parent("li").index();
var li_ind = $('.payment-wizard li.active').index();
if(this_li_ind < li_ind){
$('.payment-wizard li.active').addClass("jump-here");
}
$(this).parent().addClass('active').removeClass('completed');
$(this).siblings('.wizard-content').slideDown();
}
});
})
</script>
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn

