标签:选项 parent cdn htm style document body type ready
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>
标签:选项 parent cdn htm style document body type ready
原文地址:http://www.cnblogs.com/danhailong/p/6680595.html