toggle() , toggleClass() 方法

QinAction

于 2017-07-28 09:28:55 发布

阅读量628

点赞数

分类专栏： JavaScript 文章标签： toggleClass 方法

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文通过两个示例展示了如何使用jQuery的toggle方法来切换元素的可见性，并使用toggleClass方法来为元素添加或删除类。第一个示例演示了点击按钮时段落文本的显示与隐藏；第二个示例则说明了如何通过点击按钮为列表项动态地添加或删除带有不同样式的类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toggle()

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

                                                                                    
                            toggleClass() 方法
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $('ul li').toggleClass(function(){
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
</body>
</html>