JQ实现滑动门切换效果

 来源:互联网搜集/个人经验 作者:www.yemiansheji.cn 浏览人数:
<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次
  • 王晴儿:HTML5如何进行测试和调试
  • 王晴儿:CSS导航菜单水平居中的多种方法
  • 【套版】列表页-标题时间
  • 网站设计建设之的色彩与人的感受
  • 王晴儿工作室祝亲朋好友们和客户们中秋节快乐!
  • 不要再说你懂用户运营了!这才是真正的用户运营!
  • 企业网站SEO优化之如何做标题TITLE的SEO优化!其实很简单!
  • QQ在线咨询
    在线沟通
    QQ/微信同号
    1930533604