您的位置：首页 > Web前端 > JQuery

jQuery中toggleClass()与toggle()

2017-02-22 20:17 162 查看

1.toggleClass()

如果我们在CSS类的应用与不应用之间进行切换，我们可以使用toggleClass()来实现。

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggleClass('hover');

});

});

</script>

<style>

.hover{

background-color:yellow;

}

</style>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html>

运行的效果是如果我们点击按钮的话，p元素的背景会出现黄色，如果我们再次点击按钮的话，p元素的背景就会恢复为原来的颜色。如果我们这个时候再去点击按钮的话，背景元素还是会变为黄色的。这就是切换应用一个CSS类。实际上就是如果CSS类已经应用到指定元素，则此方法删除CSS类；如果尚未应用，则为制定元素应用CSS类。

2.toggle()

此方法是为指定的元素附加两个事件处理函数。第一个事件处理函数在事件偶数次发生时被执行，而第二个事件处理函数在事件奇数次发生时被执行，从0开始计数。就是如果我们使用toggle()方法，两件事件处理函数将被轮流执行。

$(document).ready(function(){

$('.buttons').toggle(function(){

$(this).addClass('hover');},

function(){

$(this).removeClass('hover');

}

});

});

还可以这样子使用

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle();

});

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html&
4000
gt;

这样子的话，点击按钮后p元素就会不见了，但是如果我们又点击按钮p元素就会重新出现.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航