JQ实现滑动门切换效果

 来源:互联网搜集/个人经验 作者:www.logosblog.com 浏览人数:
<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>

相关文章分享:
  • ag8亚游集团:HTML5如何进行测试和调试
  • ag8亚游集团:CSS导航菜单水平居中的多种方法
  • JQ实现点击加1,只能点1次
  • 【套版】列表页-标题时间
  • 如何做好内容运营打造出现象级的产品
  • 百度搜索引擎究竟喜欢什么样的网站?
  • 关于创业,自媒体,博客经营,生活感悟
  • 远人侧边导航固定代码
  • QQ在线咨询
    在线沟通
    QQ/微信同号
    1930533604