WEB开发网
开发学院网页设计JavaScript JQuery点滴之toggle 阅读

JQuery点滴之toggle

 2009-11-17 00:00:00 来源:WEB开发网   
核心提示:今天针对这个JQuery里面的toggle聊几句,文章中涉及到了一些问题望牛牛们能帮忙解惑一下,JQuery点滴之toggle,今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作,比如:对一个按钮的点击事件和一个DIV的背景,主要是用来切换元素的显示状态,如果一个元素是显示

今天针对这个JQuery里面的toggle聊几句,文章中涉及到了一些问题望牛牛们能帮忙解惑一下。

今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。

比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的

背景色改为黑色。

我们定义的HTML代码如下:

   1:  <body>
   2:  <input type="button" id="btnShow" value="Toggle"/>
   3:  <div id="DivToggle">此处显示  id "DivToggle" 的内容</div>
   4:  </body>

定义的最初的样式如下:

   1:  #DivToggle {
   2:      height: 150px;
   3:      width: 200px;
   4:      margin: 50px;
   5:      background-color: #6CC;
   6:  }

在toggle(fn,fn,….);先明白一个toggle()的函数,主要是用来切换元素的显示状态。如果一个元素是显示的,那么调用.toggle()之后就变得隐藏了。

JQuery代码:

   1:      <script type="text/javascript">
   2:          $(
   3:          function() {
   4:          $("#btnShow").click(function(event) {
   5:                  $("#DivToggle").toggle();
   6:              });
   7:          }
   8:          );
   9:      </script>

1 2 3  下一页

Tags:JQuery 点滴 toggle

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接