html+css+jquery做选项卡

 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd  html xmlns= http://www.w3.org/1999/xhtml  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title 列表选项卡 /title  style type= text/css body{ margin:0px; padding:0px; #main{ width:310px; border:1px solid #C8C8CC; margin-left:auto; margin-right:auto; margin-top:50px; .main_title{ width:310px; border-bottom:1px solid #C8C8CC; height:30px; #main div .chang{ border:1px solid #C8C8CC; float:left; width:153px; height:26px; text-align:center; padding-top:4px; cursor:pointer; .main_head{ width:310px; height:25px; background-color:#FFF4F8; .main_head font{ font-size:13px; color:#808080; margin-top:5px; .main_content{ width:310px; border-top:1px solid #808080; .main_content ul{ margin-left:-30px; margin-top:5px; width:290px; .main_content ul li{ list-style-type:none; font-size:13px; color:#2464B2; border-bottom:1px dotted #808080; line-height:27px; .main_content ul li a{ font-size:13px; color:#2464B2; text-decoration:none; .main_content ul li a:hover{ text-decoration:underline; #main div ul.main_content_chang{ width:290px; position:relative; z-index:100; top:0px; left:0px; display:block; #main div ul{ position:relative; display:none;  /style  script type= text/javascript src= js/jquery-1.9.1.js /script  script type= text/javascript $(function(){ $( .chang ).each(function(index){ $(this).click(function(){ $(this).css( background-color , #E02D29 $(this).siblings( div ).css( background-color , #fff $( #main div ul ).removeClass( main_content_chang $( .main_content ul:eq( +index+ ) ).show().siblings( ul ).hide();  /script  /head  body  div id= main  div >
相信看了这些案例你已经掌握了方法，更多精彩请关注php 其它相关文章！
相关阅读：
form上传文件后怎样提示保存action
怎样用按钮触发实现背景色的闪烁
html里table表数据如何转为Json格式
html里怎样实现异步上传文件
以上就是html+css+jquery做选项卡的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。