jQuery bind事件练习及tab标签切换的实现

jQuery bind事件练习及tab标签切换的实现

1.bind事件

jQuery部分代码：

html部分代码：

无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档

-----------------------------------------------------------------------------------------------------------------------------------------------

2.tab标签切换的实现

jQuery部分代码：

html部分代码：

css样式代码：

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} body{ font-size:12px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif, "宋体";} ul, ol, li { list-style:none; } .tab{ margin:50px;} .tab_menu{ width:279px; height:22px; border:1px solid #ebebeb; border-bottom:none; } .tab_menu ul{ margin-left:-1px; zoom:1;} .tab_menu ul li { width:69px; float:left; text-align:center; line-height:22px; background:#ccc; height: 22px; display:inline; cursor:pointer;  border-left:1px solid #ebebeb;  } .tab_menu ul .active { font-weight: bold; color: #666; background:#fff;border-bottom: solid 1px #fff; position:relative; z-index:4; margin-bottom:-1px; } .tab_box{ width:258px; height:200px; line-height:22px; border:1px solid #ebebeb; padding:10px;  position:relative;}

大致预览效果如图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。