jquery 自定义tab

时间：2014-06-21 16:17:45 收藏：0 阅读：210
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){

  $("#a").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white");
   $("p").css(‘display‘,‘none‘);
$("#po").css(‘display‘,‘block‘);  
  });
 $("#b").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white");

   $("p").css(‘display‘,‘none‘);
$("#po1").css(‘display‘,‘block‘);  
  });
 $("#c").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white");

   $("p").css(‘display‘,‘none‘);
$("#po2").css(‘display‘,‘block‘);  
  });
});
</script>
</head>

<body>
<h2 id=‘a‘ >这是标题1</h2>
<h2 id=‘b‘>这是标题2</h2>
<h2 id=‘c‘ >这是标题23</h2>
<p id=‘po‘ style="background-color:#ff0000">这是一个段落23。</p>
<p  id=‘po1‘ style="background-color:#00ff00">这是一个段落2222。</p>
<p  id=‘po2‘ style="background-color:#0000ff">这是一个段落。2222222</p>
<button>返回 p 元素的背景色</button>
</body>
</html>
jquery 自定义tab,布布扣,bubuko.com