jq选项卡切换功能
效果图：
<!DOCTYPE html> <html lang="en"> <head> <style> *{margin:0;padding: 0} body{font:normal '宋体' arial ;} #box{position: relative;left:50%;width: 240px;margin-left: -120px;top:100px;} #tab_menu ul li{float: left;margin-left: 5px;list-style: none;} #tab_menu ul li a{display: block;width:37px;height: 21px;line-height:21px;text-decoration: none;border: 1px solid #898989;border-bottom:none;background:#f1f1f1;text-align:center;} .hover{background: blue;} #tab_box{width:240px;height: 100px;border :1px solid black;clear:both;} #tab_menu li a.selected{background: #6D84B4;} /*这里必须有#tab_menu li,因为是给它加的*/ /*子元素的样式覆盖父元素的样式*/ #tab_menu li .hover{background:white; } #tab_box .child_box_2{display: none;} #tab_box .child_box_3{display: none;} /*#tab_menu .hover{background:blue;}*/ </style> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ // $('#tab_box .child_box_1').siblings().hide();//如果用这个的话，会出现一闪的情况。 // 说明这个的加载速度比css要慢。 $('#tab_menu li a').each(function(){ $(this).click(function(){//是每个menu下的a元素 var $id=$(this).attr('id');//获取到当前a元素的Id // alert($id); // $(this).addClass('selected').siblings().removeClass('selected');这样的话找不到后面不能删除。他这同辈元素大概没有找到。 $('#tab_box .child_'+$id).show().siblings().hide();//这个是实现div内其他内容隐藏 $(this).addClass('selected').parent().siblings().children().removeClass('selected');//增加删除样式 }).hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); }); }); </script> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <div id="tab_menu"> <ul> <li><a href="#" class='parent selected' id='box_1'>时事</a></li> <li><a href="#" class='parent' id='box_2'>体育</a></li> <li><a href="#" class='parent' id='box_3'>娱乐</a></li> </ul> </div> <div id="tab_box"> <div class="child_box_1">时事</div> <div class="child_box_2">体育</div> <div class="child_box_3">娱乐</div> </div> </div> </body> </html> <!-- 问题1 刚开始就有3个div不能去除 通过$('#tab_box .child_box_1').siblings().hide();隐藏但是会出现一闪的情况说明这个的加载速度比css要慢。
问题2 不能够删除后面添加的颜色，是因为siblings()对象有问题 给添加的应该是li层的颜色，那会简单点，弄a层颜色的话，后面的siblings()要获取到对象得先 parent()后children() 即a 不能获取到被包裹的a得先找到Li后找到a。 li a li a 问题3 不能够增加hover样式和hover样式在选中状态下如何去除 给li元素增加hover()事件 因为#tab_menu设置的是li a 通过子元素a来覆盖父元素li的样式来实现选中的状态下不显示hover效果 -->
