我是如何去了解jquery的(四),切换事件hover&toggle
作者：田想兵 博客地址:/tianxiangbing
&我用两篇文章的时间讲述了如何利用，现在又要用两篇文章的时间来说明jquery的事件驱动，在里已经明确说明了这一点，包括js里最常用到的点击click事件的使用，诸如其他事件，都是和click类似的处理。如表单事件submit，写时$(&form&).submit(/*fuc*/);又如键盘事件keydown，$(&div&).keydown(/*fuc*/);还有鼠标的mouveover(鼠标移入对象时触发)，所以，这节就没有必要再次去说明这些常用事件了，这节我们要讲的是事件的切换hover|toggle。
&本文案例及请点击 这里。
&先来看API里对于hover(over/*function*/,out/*function*/)的说明：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种&保持在其中&的状态。
&它的人类语言说法就是，当鼠标移入一个对象时，它会触发一个方法，移出时又会触发另一个方法，说白了，就是onmouver和onmouseout的结合体,也就是一个节点上同时绑定了这两个事件。
好，我们用它来完成一个功能来说明它的用法，比如上前一节里，页面上有一个表格式形式的数据，由于数据量较大，或许我们需要在鼠标移上去时，让该行的背景色变深，这样更能够集中注意力，然后鼠标移去这一行时，我们需要把背景色还原，代码如下:
$(&.list tr&).hover(function(){
&& $(this).css(&backgroundColor&,&blue&);
},function(){
&& $(this).css(&backgroundColor&,&#fff&);&&&&&&&
这样写很好理解是吧，不过有个问题是如果原来table就有背景色的话，这样写会把原有的背景色变成白色，假设我们还是让奇偶数行的颜色不一样
$(&.list tr:even&).css(&backgroundColor&,&#ddddee&);
$(&.list tr:odd&).css(&backgroundColor&,&#999&);
那我要怎么做才能移进去有色，移出来还原成原来的颜色呢？我们可以使用css里的class，我们建一个class类.brTR
.brTR{ background-Color:}
&然后把刚才的JS改成:
$(&.list tr&).hover(function(){
&& $(this).addClass(&brTR&);
},function(){
&& $(this).removeClass(&brTR&);&&&&
结果你一试，发现还是不行，为什么呢，因为你刚才把奇偶行变色时用的是css()，这个设置的是style，又因为style的权重比class要大，所以会优先使用style的样式，所以刚才的变色还得这样改：
& tr.brTR{background-color:}
& .odd{background-color:#999;}
& .even{background-color:#}
&&& $(&.list tr:even&).addClass(&event&);
&&& $(&.list tr:odd&).addClass(&odd&);
这里我把brTR改成了tr.brTR，这样是为了提升这个class的权重，不然的话它的权重和.odd是一样的，而.odd是在后面，所以还是只会显示.odd或.even的背景.在权重中，一般情况是style&ID&class&div，如果是同等级的话，越详细权重就越大，这个如果你有兴趣可以查阅相关资料。
我们发现这种写法是简便了许多，但还是觉得有点重复，因为在移入和移出事件中，都是添加删除相同的class，jquery有没有更简便的方法呢，答案是肯定地，在jquery还有一个toggleClass，就是针对这种状态在两种之间切换的样式而出的。它的作用是如果有该class就移除，没有就添加。所以上面的代码还可以继续简化为：
$(&.list tr&).hover(function(){&&&&&&&
&&& $(this).toggleClass(&brTR&);
&我们甚至连第二个函数都省略掉了，只有这一行就可以完成，鼠标移动变色还原的效果了，在省略第二个参数out/*function*/时，它默认会在out时继续调用第一个参数，所以toggleClass也是有它的用武之地的。
又有需求了，我想查看多个行的数据，这样方便对比，我希望它们保持不同的背景色，比如一级用红色，二级用绿色，三级用黄色等。好，那我们就要引入下一个jquery切换事件了toggle， 它的说明是：每次点击都依次调用参数函数。所以这个功能很简单，可以这样做：
$(&.list tr&).toggle(function(){&&&&&&
&& $(this).css(&backgroundColor&,&red&);
},function(){
&& $(this).css(&backgroundColor&,&green&);
},function(){
&& $(this).css(&backgroundColor&,&yellow&);
这样你就可以完成多个状态间的切换了，toggle做的就是click事件，它就是把多个click按顺序来一次性执行。正因为它可以切换click事件，所以我们最常用的点击显示隐藏功能就可以用它来完成了。比如我们有个广告浮动条，想点击之后关闭，然后再有个还原点击，应该怎么做呢，考虑30秒。
好了，30秒到了，请看下面的代码片断：
&p class=&ad&&
&a class=&close&&关闭&/a&
&img src=&index.jpg& width=&50px&/&
$(&.ad a.close&).toggle(function(){
&&&&&&& $(&.ad img&).hide();
$(this).html(&还原&);
&&& },function(){$(&.ad img&).show();$(this).html(&关闭&);});
好，今天就到这里了，大家可以多试用下这两个切换方法，比如常用的导航菜单，模拟复选框等。如果你有任何的疑问都不要问我，请重复再重复本文。或加入我的Q群进行讨论。
&本文案例及源码请。基于easyui tabs选项卡的扩展插件--tabs单击事件 - 博客频道 - CSDN.NET
~专心~专注
分类：javascript
* easyui tbas组件扩展单击事件
$.extend($.fn.tabs.methods, {
* 绑定单击事件
* @param {Object} jq
* @param {Object} caller 绑定的事件处理程序
bindClick: function(jq, caller){
return jq.each(function(){
var that =
$(this).children(&div.tabs-header&).find(&ul.tabs&).undelegate('li', 'click.tabs').delegate('li', 'click.tabs', function(e){
if (caller && typeof(caller) == 'function') {
var title = $(this).text();
var index = $(that).tabs('getTabIndex', $(that).tabs('getTab', title));
caller(index, title);
* 解除绑定双击事件
* @param {Object} jq
unbindClick: function(jq){
return jq.each(function(){
$(this).children(&div.tabs-header&).find(&ul.tabs&).undelegate('li', 'click.tabs');
排名：第6330名
（24）（70）（2）（2）（21）（2）（3）（5）（7）（2）（5）（4）（1）（2）（6）（1）（1）（6）（3）（3）（5）（1）（1）（4）（10）（1）（2）（1）（7）（1）（1）（1）（1）（1）（9）（3）（1）（1）（11）（1）（2）JS将滑动门改为选项卡（需鼠标点击）的实现方法
作者：企鹅
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下
本文实例讲述了JS将滑动门改为选项卡（需鼠标点击）的实现方法。分享给大家供大家参考。具体如下：
大家都知道，滑动门和选项卡在布局和结构方面几乎是一样的，唯一不同的是触发方式，这个是由JavaScript决定的，大致来讲就是将onmouseover改为onclick就行了，本款选项卡以前是款比较流行的滑动门，现在改成了选项卡，大家看看有什么区别。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&滑动门改为选项卡&/title&
padding:0;margin:0;
font-size:12
list-style:
text-align:
padding:0;
text-decoration:
line-height:24
border-top:0;
width:562px!
height:190
overflow-y:
.common li{
list-style:
padding-left:14px!
padding-left:0;
padding-top:4
.common li a{
text-decoration:
.common li a:hover{
background:url(images/tabs3.gif) no-
background:url(images/tabs2.gif) no-
function $(ID){
return document.getElementById(ID)
function showTab(ID){
for(var i=1;i&7;i++){
if(ID==i){
$('tab'+i).blur();
$("tab"+i).className="on";
$("cont"+i).style.display="block";
$("tab"+i).className="off";
$("cont"+i).style.display="none";
&div id="main"&
&div id="tab"&
&li&&a href="javascript:void(0)" id="tab1" class="on" onclick="showTab('1')"&C#源代码&/a&&/li&
&li&&a href="javascript:void(0)" id="tab2" class="off" onclick="showTab('2')"&VB源代码&/a&&/li&
&li&&a href="javascript:void(0)" id="tab3" class="off" onclick="showTab('3')"&VC源代码&/a&&/li&
&li&&a href="javascript:void(0)" id="tab4" class="off" onclick="showTab('4')"&JQUERY脚本&/a&&/li&
&li&&a href="javascript:void(0)" id="tab5" class="off" onclick="showTab('5')"&Delphi代码&/a&&/li&
&li&&a href="javascript:void(0)" id="tab6" class="off" onclick="showTab('6')"&JAVA源代码&/a&&/li&
&div id="cont" &
&div id="cont1" class="common" style="display:"&
&li&&a href="#" target="_blank"&30多个C#基础学习实例&/a&&/li&
&div style="display:" id="cont2" class="common"&
&li&&a href="#" target="_blank"&VB仿Photoshop曲线调整图像亮度源程序&/a&&/li&
&div style="display:" id="cont3" class="common"&
&li&&a href="#" target="_blank"&VC仿RealonePlayer播放器的窗体界面&/a&&/li&
&div style="display:" id="cont4" class="common"&
&li&&a href="#" target="_blank"&Farbtastic jQuery圆形网页取色插件&/a&&/li&
&div style="display:" id="cont5" class="common"&
&li&&a href="#" target="_blank"&Delphi基础学习实例代码&/a&&/li&
&div style="display:" id="cont6" class="common"&
&li&&a href="#" target="_blank"&Java图书管理程序代码&/a&&/li&
希望本文所述对大家的JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具