动态中心 news

在线客服:客服 客服


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

 编辑:waimaoxing  浏览:
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>

关键词:

相关文章分享:
  • ·分享一段织梦DEDECMS移动端跳转代码
  • ·分享一段有关移动端常用的前端代码
  • ·如何不让同行复制代码?分享一段网页禁止复制js代码
  • ·远人侧边导航固定代码
  • ·JQ实现滑动门切换效果代码分享
  • ·视频点击播放再点击暂停代码
  • ·分享如何让JQ实现点击加1,只能点1次
  • ·分享顶端导航固定代码