首页 > 代码库 > 标签切换
标签切换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> 6 <script type="text/javascript"> 7 8 $(document).ready(function () { 9 $("#tabs div").bind("click", function () { 10 var index = $(this).index(); 11 var divs = $("#tabs-body > div"); 12 $(this).parent().children("div").attr("class", "select1");//将所有选项置为未选中 13 $(this).attr("class", "select2"); //设置当前选中项为选中样式 14 divs.hide();//隐藏所有选中项内容 15 divs.eq(index).show(); //显示选中项对应内容 16 }); 17 18 }); 19 </script> 20 21 <style type="text/css"> 22 23 </style> 24 </head> 25 <body> 26 <div id="tabs"> 27 <div class="select1" style="float:left;">管理导航</div> 28 <div class="select2">系统设置</div> 29 </div> 30 31 <div id="tabs-body" class="tabs-body"> 32 <div style="display:block"> 33 111111111 34 </div> 35 <div style="display:none"> 36 222222222 37 </div> 38 </div> 39 </body> 40 </html>
标签切换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。