码迷,mamicode.com
首页 > Web开发 > 详细

jquery 自定义tab

时间:2014-06-21 16:17:45      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   color   html   

<!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

jquery 自定义tab

标签:style   class   blog   code   color   html   

原文地址:http://www.cnblogs.com/majin/p/3800510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!