JQ实现滑动门切换效果代码分享

2017-12-21 17:12| 发布者: UE网页设计| 查看: |

JQ实现滑动门切换效果代码分享
 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<div class="menu_wrap">
<dl> 
<dd><b>.</b>个人资料</dd>
<dd><b>.</b>我的订单</dd>
<dd><b>.</b>我的收藏</dd>
<dd><b>.</b>我的评论</dd>
<dd><b>.</b>浏览历史</dd>
<dd><b>.</b><a href="<?php echo U('Home/Member/logout'); ?>">安全退出</a></dd>
</dl>
 
</div>
            
<div class="content"></div>
<div class="content" style="display: none"></div>
<div class="content" style="display: none"></div>
<div class="content" style="display: none"></div>
<div class="content" style="display: none"></div>
<script type="text/javascript">
// 点击按钮切换table
$("div.menu_wrap dl dd").click(function(){
// 获取点击的是第几个按钮
    
var i = $(this).index();
// 显示第i个table
$(".content").eq(i).show();
// 隐藏其他的table
$(".content").eq(i).siblings(".content").hide();
// 把原来选中的取消选中状态
$(".menu_wrap dl dd").removeClass("on");
// 切换点击的按钮的样式为选中状态
$(this).addClass("on");
});
 
</script>
分享如何让JQ实现点击加1,只能点1次   分享顶端导航固定代码
    相关推荐
 
QQ在线咨询
服务咨询QQ
1930533604
服务咨询热线
18315917852
返回顶部