微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery简单实现网页选项卡特效

CSS:

代码如下:
display:block; float:left; background:#C2CEFE; height:22px; line-height:22px; padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; } .Box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } .tab_menu ul li.selected{background:#dadada; cursor:pointer; } .hide{display:none;}

jQuery:

代码如下:
高亮 .siblings().removeClass("selected"); //去掉其它同辈
  • 的高亮 var index = $menu_li.index( $(this) ); //找到
  • 子节点的索引 $("div.tab_Box > div").eq(index).show() //索引为N的DIV显示出来 .siblings().hide(); //其它的选项卡隐藏 }) })
  • html:

    代码如下:
  • 博客
  • Box">
    Box">我的QQ:123456
    Box hide">hi
    Box hide"> hello

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐