信鸽网

jQuery仅用3行代码实现的显示与隐藏功能完整实例

  作者：bea

本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下： jQuery技术相当好使用，的确可以用很少的代码实现想要的功能，比如这款经常用到的“显示”与“隐藏”的功能，只需要3行代码就实现了，确实够给力。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下： <!doctype html><html>

本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下：


jQuery技术相当好使用，的确可以用很少的代码实现想要的功能，比如这款经常用到的“显示”与“隐藏”的功能，只需要3行代码就实现了，确实够给力。


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/jquery-simple-hide-show-style-demo/


具体代码如下：




<!doctype html>

<html>

<head>

<meta charset="gbk" />

<title>3行代码实现显示与隐藏</title>

<script type="text/javascript" src="jquery1.3.2.js"></script>

<style>

  .showmore{ float:left;}

  .cont .aa {

  height: auto;

  width: 400px;

  border: 1px solid #000000;

  margin-bottom: 10px;

  padding-right: 10px;

  padding-left: 10px;

  float: left;

  }

  .cont .aa .a1 {

  float: left;

  height: 30px;

  width: 300px;

  }

  .cont .aa .a2 {

  height: 30px;

  width: 350px;

  float: left;

  display:none;

  }

 </style>

</head>

<body>

<div class="cont">

 <div class="aa">

  <div class="a1">tab1</div>

  <div class="showmore"><a href="#"><span>显示</span></a></div>

  <div class="a2">详细说明：今天你要嫁给我嘛~</div>

 </div>

 <div class="aa">

  <div class="a1">tab2</div>

  <div class="showmore" ><a href="#"><span>显示</span></a></div>

  <div class="a2">详细说明：北京、上海四日游</div>

 </div>

 <div class="aa">

  <div class="a1">tab3</div>

  <div class="showmore" ><a href="#"><span>显示</span></a></div>

  <div class="a2">详细说明：河南是华夏文明的根源</div>

 </div>

</div>

<script>

$(".showmore a span").mouseover(function(e){

 $(this).html(["显示", "隐藏"][this.hutia^=1]);

 $(this.parentNode.parentNode).next().toggle();

 e.preventDefault();

});

</script>

</body>

</html>


希望本文所述对大家的jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: