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